Question

这是我第二次使用bootstrap移动切换时遇到这个非常烦人的问题。我不知道问题是什么，但过了一会儿，菜单切换按钮才停止工作。我在网上搜了好几个小时，发现这个问题我认为可能是我的，数据目标ID。但是，我和其他许多方法一样尝试过。

我目前正在使用Wordpress中的Bootstrap并构建自己的主题。我真的很喜欢Bootstrap，但现在开始讨厌所有类的错误。或者另一个想法是我真的很擅长自举！救命！！这是我的代码......：P

------ index.php -------

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" id="" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navigationbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

我的PHP代码：

function theme_styles() {
    wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' );
    wp_enqueue_style( 'viewportfix_css', get_template_directory_uri() . '/css/ie10-viewport-bug-workaround.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/css/main.css' );
}

add_action( 'wp_enqueue_scripts', 'theme_styles' );



function theme_js() {
    global $wp_scripts;
    wp_register_script( 'html5_shiv', '//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', '', '', false );
    wp_register_script( 'respond_js', '//oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

    wp_enqueue_script( 'bootstrap_js', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js');
    wp_enqueue_script( 'bootstrap_js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
    wp_enqueue_script( 'viewportfix_js', get_template_directory_uri() . '/js/ie10-viewport-bug-workaround.js', array('jquery'), '', true ); 
    wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.min.js', array('jquery'), '', true ); 
}

add_action( 'wp_enqueue_scripts', 'theme_js' );

Answer 1

您的bootstrap.js文件没有JQuery作为依赖项。你不必将JQuery排入队列，因为它已经存在于WordPress中。当您将bootstrap js文件排入队列时，只需将其添加为依赖项，就像使用main.js文件一样。

Bootstrap移动菜单停止工作？

1 个答案: