引导导航栏切换按钮不起作用 [英] bootstrap navbar toggle button is not working
问题描述
我正在使用Bootstrap v3.0.2开发响应式的wordpress主题。
I'm working on a responsive wordpress theme with Bootstrap v3.0.2.
在移动/平板电脑浏览器中，而不是整个菜单中，我需要显示Bootstrap切换按钮。我的按钮正在显示，但是当我单击它时，没有任何反应。这是我在 header.php 中编写的代码：
In mobile/tablet browsers instead of the whole menu i need to show the Bootstrap toggle button. My button is showing, but when I click on it nothing is happening. This is code I wrote in my header.php :
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
我在 function.php ：
function wpt_register_js() {
wp_register_script(
'jquery.bootstrap.min',
get_template_directory_uri() . '/js/bootstrap.min.js',
'jquery'
);
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style(
'bootstrap.min',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
footer.php代码包含：
the footer.php code contains:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<?php wp_footer();?>
</body>
header.php包含：
the header.php contains:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('|', true, 'right'); ?></title>
<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php wp_head(); ?>
</head>
此问题通过使用Bass Jobsen的答案来解决。谢谢朋友
推荐答案
请阅读 http：//首先是getbootstrap.com/components/#navbar 。您的导航栏需要使用javascript：
Please read http://getbootstrap.com/components/#navbar first. Your navbar requires javascript:
如果禁用了JavaScript且视口太窄以至于
导航栏折叠，则不可能展开导航栏并在$ .navbar折叠中查看
的内容。
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
请确保在其中包含bootstrap.js您的文件。您可能会忘记上传此文件？
Make sure you include bootstrap.js in your document. You forgot to upload this maybe?
更新是根据您问题中的新信息：
update based on new information in your question:
将所有的javascript和css排队到functions.php中，并将它们从header.php和footer.php中删除
enqueue all your javascripts and css in functions.php and remove them from your header.php and footer.php
javascript：
javascript:
function skematik_jquery_js(){
wp_enqueue_script('jquery');
}
function wpt_register_js() {
wp_register_script(
'jquery.bootstrap.min',
get_template_directory_uri() . '/js/bootstrap.min.js',
'jquery'
);
wp_enqueue_script('jquery.bootstrap.min');
}
/* Load Scripts */
add_action( 'wp_enqueue_scripts', 'skematik_jquery_js' );
add_action( 'wp_enqueue_scripts', 'wpt_register_js' );
css：
function wpt_register_css() {
wp_register_style(
'bootstrap.min',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
这篇关于引导导航栏切换按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
