引导导航栏切换按钮不起作用答案

【问题标题】：bootstrap navbar toggle button is not working引导导航栏切换按钮不起作用
【发布时间】：2013-12-04 04:55:08
【问题描述】：

我正在使用 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="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="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="<?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 的回答解决了。谢谢朋友

【问题讨论】：

给出的答案将解决您的问题，如果仍然存在，请分享有问题的网址

标签： twitter-bootstrap wordpress-theming twitter-bootstrap-3 collapse togglebutton

【解决方案1】：

请先阅读http://getbootstrap.com/components/#navbar。您的导航栏需要 javascript：

如果 JavaScript 被禁用并且视口足够窄，导航栏崩溃，将无法展开导航栏和查看 .navbar-collapse 中的内容。

确保在文档中包含 bootstrap.js。你可能忘记上传了？

更新根据您问题中的新信息：

将你所有的 javascripts 和 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' );

【讨论】：

感谢您的回复先生。我已经使用上面的代码添加了 javascript 文件 bootstrap.min.js 文件。是你说的那个文件吗？还是我错过了任何其他 js 文件？
是的，就是这个文件。我将脚本排在wp_enqueue_scripts 上，而不是 jquery。我不希望这会导致您的问题。您还必须将 jquery 加入队列。如果可能的话，显示一个代表您的问题的 url。
查看@zessx 的答案或考虑使用github.com/bassjobsen/jamedo-bootstrap-start-theme
所以根据他的回答我应该从functions.php中删除入队代码。对吧，先生？
不尝试删除第一个，我认为它在您的主题标题中。另请阅读bassjobsen.weblogs.fm/…。将 jquery 和 boostrap 入队并设置 jquery 的依赖项以进行引导。

【解决方案2】：

你应该：

加载 jQuery 和 Bootstrap.js 一次，而不是每次两次
加载 jQuery 之前 Bootstrap.js

目前，您有：

<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>

控制台输出证实了我们的猜测：

未捕获的错误：Bootstrap 需要 jQuery

当你加载 Bootstrap.js 时，jQuery 仍然没有加载。

【讨论】：

我有类似的问题 - 在bootsrap.js 之前加载jquery 导航栏toggle 现在可以使用

【解决方案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="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>

我已将上述代码添加到我的 HTML 中，它在 IE 上运行良好！！谢谢！！

【讨论】：