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

Question

我正在使用 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的回答解决了。谢谢朋友

Answer 1

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

如果 JavaScript 被禁用并且视口足够窄，导航栏折叠，无法展开导航栏和视图 .navbar-collapse 中的内容。

确保您的文档中包含 bootstrap.js。也许您忘记上传这个？

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

将所有 javascript 和 css 放入 function.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' );

Answer 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 仍未加载。

Answer 3

0
投票

我删除了完整性属性，现在它工作得很好

Answer 4

<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 上运行得很好！谢谢！！

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4