bootstrap导航栏切换按钮不起作用

我正在使用Bootstrap v3.0.2开发响应式wordpress主题。
在移动/平板电脑浏览器中, 而不是整个菜单中, 我需要显示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>

我在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代码包含:
< script src="http://img.readke.com/220603/0SS05042-0.jpg"> < /script> < script src="http://www.srcmini.com/js/bootstrap.min.js"> < /script> < ?php wp_footer(); ?> < /body>

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="http://www.srcmini.com/< ?php echo get_template_directory_uri(); ?> /css/bootstrap.min.css"rel="stylesheet" type="text/css"> < link href="http://www.srcmini.com/< ?php echo get_template_directory_uri(); ?> /css/style.css" rel="stylesheet" type="text/css"> < ?php wp_head(); ?> < /head>

【bootstrap导航栏切换按钮不起作用】使用Bass Jobsen的答案解决了这个问题。谢谢朋友
#1请先阅读http://getbootstrap.com/components/#navbar。你的导航栏需要javascript:
如果禁用了JavaScript并且视口足够窄以至于导航栏折叠, 则将无法展开导航栏并查看.navbar-collapse中的内容。
确保在文档中包含bootstrap.js。你忘记上传了吗?
根据你问题中的新信息进行更新:
将所有JavaScript和CSS排入functions.php并将其从header.php和footer.php中删除
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' );

#2你应该 :
  1. 一次加载jQuery和Bootstrap.js, 而不是两次
  2. 在Bootstrap.js之前加载jQuery
目前, 你已经:
< 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="http://img.readke.com/220603/0SS05042-0.jpg"> < /script> < script src="http://www.srcmini.com/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>

控制台输出确认我们可以猜测的内容:
未捕获的错误:Bootstrap需要jQuery
加载Bootstrap.js时, 仍未加载jQuery。
#3
< 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="http://img.readke.com/220603/0SS05042-0.jpg"> < /script> < script src="http://www.srcmini.com/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>

我已经将以上代码添加到HTML中, 并且可以在IE上正常工作!谢谢!!

    推荐阅读