Twitter bootstrap 引导导航栏切换按钮不工作

Twitter bootstrap 引导导航栏切换按钮不工作,twitter-bootstrap,wordpress-theming,twitter-bootstrap-3,collapse,togglebutton,Twitter Bootstrap,Wordpress Theming,Twitter Bootstrap 3,Collapse,Togglebutton,我正在使用BootstrapV3.0.2开发一个响应性强的wordpress主题 在移动/平板电脑浏览器中,我需要显示引导切换按钮,而不是整个菜单。我的按钮正在显示,但当我点击它时,什么都没有发生。这是我在header.php中编写的代码: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-o

我正在使用BootstrapV3.0.2开发一个响应性强的wordpress主题

在移动/平板电脑浏览器中,我需要显示引导切换按钮,而不是整个菜单。我的按钮正在显示,但当我点击它时,什么都没有发生。这是我在
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 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' );
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>
<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>

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

请先读。您的导航栏需要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' );
如果禁用JavaScript且视口足够窄,则 如果导航栏折叠,则无法展开导航栏和视图 .navbar中的内容将折叠

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

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

将所有Java脚本和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:

请先读。您的导航栏需要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' );
如果禁用JavaScript且视口足够窄,则 如果导航栏折叠,则无法展开导航栏和视图 .navbar中的内容将折叠

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

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

将所有Java脚本和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:

你应该:

  • 加载jQuery和Bootstrap.js一次,而不是每次加载两次
  • 在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="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>
    
    
    ...
    
    控制台输出确认了我们可以猜测的内容:

    未捕获错误:引导需要jQuery

    加载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="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>
    
  • 加载jQuery和Bootstrap.js一次,而不是每次加载两次
  • 在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="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>
    
    
    ...
    
    控制台输出确认了我们可以猜测的内容:

    未捕获错误:引导需要jQuery

    加载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="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上运行得很好!!谢谢

    
    ...
    

    我已经将上面的代码添加到我的HTML中,它在IE上运行得很好!!谢谢

    给出的答案将解决您的问题,如果仍然存在,请在有问题的地方共享url。即使答案将解决您的问题,如果仍然存在,请在有问题的地方共享url。请确认您的回答,先生。我已经使用上述代码添加了javascript文件bootstrap.min.js文件。那是你提到的文件吗?还是我遗漏了其他js文件?是的,就是这个文件。我将脚本放入
    wp\u enqueue\u scripts
    而不是jquery。我不认为这会引起你的问题。您还必须将jquery排队。如果可能的话,用你的问题的表示来显示一个URL。参见@ ZESX的答案,或者考虑使用他的答案,我应该从函数.PHP中删除队列的代码。对吧,先生?不,试着删除第一个,我想是在你的主题标题里。也读。将jquery和boostrap排队,并设置jquery对引导的依赖性。谢谢您的回复,先生。我已经使用上述代码添加了javascript文件bootstrap.min.js文件。那是你提到的文件吗?还是我遗漏了其他js文件?是的,就是这个文件。我将脚本放入
    wp\u enqueue\u scripts
    而不是jquery。我不认为这会引起你的问题。您还必须将jquery排队。如果可能的话,用你的问题的表示来显示一个URL。参见@ ZESX的答案,或者考虑使用他的答案,我应该从函数.PHP中删除队列的代码。对吧,先生?不,试着删除第一个,我想是在你的主题标题里。也读。将jquery和bootstrap排队并设置jquery对bootstrap的依赖关系。我有类似的问题-加载
    jquery
    before
    bootsrap.js
    导航栏
    toggle
    现在可以工作了-加载
    jquery
    before
    bootsrap.js
    导航栏
    toggle
    现在可以工作了