twitter-bootstrap 引导导航栏切换按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20367140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap navbar toggle button is not working
提问by Zammuuz
I'm working on a responsive wordpress theme with Bootstrap v3.0.2.
我正在使用 Bootstrap v3.0.2 开发一个响应式 wordpress 主题。
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:
在移动/平板浏览器而不是整个菜单中，我需要显示 Bootstrap 切换按钮。我的按钮正在显示，但是当我点击它时什么也没有发生。这是我写在我的代码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>
And the one I wrote in function.php:
还有我写的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' );
the footer.php code contains:
footer.php 代码包含：
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<?php wp_footer();?>
</body>
the header.php contains:
header.php 包含：
<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>
this question is resolved by using the answer of Bass Jobsen.thanks friend
这个问题是通过使用 Bass Jobsen 的答案解决的。谢谢朋友
回答by Bass Jobsen
Please read http://getbootstrap.com/components/#navbarfirst. Your navbar requires javascript:
请先阅读http://getbootstrap.com/components/#navbar。您的导航栏需要 javascript：
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.
如果禁用 JavaScript 并且视口足够窄以致导航栏折叠，则无法展开导航栏并查看 .navbar-collapse 中的内容。
Make sure you include bootstrap.js in your document. You forgot to upload this maybe?
确保在文档中包含 bootstrap.js。你忘了上传这个吗？
updatebased on new information in your question:
根据您问题中的新信息进行更新：
enqueue all your javascripts and css in functions.php and remove them from your header.php and footer.php
将所有的 javascripts 和 css 加入到functions.php 中，并从header.php 和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:
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' );
回答by zessx
you should :
你应该 ：
- Load jQuery and Bootstrap.js once, not twice each
- Load jQuery beforeBootstrap.js
- 加载 jQuery 和 Bootstrap.js 一次，而不是每个加载两次
- 在Bootstrap.js之前加载 jQuery
Currently, you've got :
目前，你有：
<head>
<script type="text/javascript" src="http://www.drjulians.com/wp-content/themes/new_responsive/js/bootstrap.min.js?ver=3.6"></script>
</head>
<body>
...
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.drjulians.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
</body>
The console output confirm what we can guess :
控制台输出证实了我们的猜测：
Uncaught Error: Bootstrap requires jQuery
未捕获的错误：Bootstrap 需要 jQuery
When you load Bootstrap.js, jQuery is still not loaded.
当您加载 Bootstrap.js 时，jQuery 仍未加载。
回答by Aymen
<head>
<script type="text/javascript" src="http://www.drjulians.com/wp-content/themes/new_responsive/js/bootstrap.min.js?ver=3.6"></script>
</head>
<body>
...
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.drjulians.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
</body>
I've Added the above code to my HTML and it worked on IE just fine!! THANK YOU!!
我已经将上面的代码添加到我的 HTML 中，它在 IE 上运行得很好！谢谢！！
