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

本文介绍了引导导航栏切换按钮不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

`推荐答案`

请阅读。您的导航栏需要使用javascript：

Please read http://getbootstrap.com/components/#navbar first. Your navbar requires javascript:

请确保在其中包含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' );

                        这篇关于引导导航栏切换按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！