bootstrap navbar toggle button is not working

问题

I'm working on a responsive wordpress theme with Bootstrap v3.0.2.

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>

And the one I wrote in 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:

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

<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

回答1:

Please read http://getbootstrap.com/components/#navbar first. Your navbar requires 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.

Make sure you include bootstrap.js in your document. You forgot to upload this maybe?

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

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:

you should :

Load jQuery and Bootstrap.js once, not twice each
Load jQuery before Bootstrap.js

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

When you load Bootstrap.js, jQuery is still not loaded.

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

I've Added the above code to my HTML and it worked on IE just fine!! THANK YOU!!

来源：https://stackoverflow.com/questions/20367140/bootstrap-navbar-toggle-button-is-not-working

标签

twitter-bootstrap

wordpress-theming

twitter-bootstrap-3

collapse

togglebutton