2016-06-07 108 views
0

這是我第二次使用bootstrap移動切換來解決這個問題。我不知道問題是什麼,但過了一段時間,菜單切換按鈕停止工作。我在網上搜索了好幾個小時,發現這個問題我認爲可能是我的,數據目標ID。但我已經嘗試過,和其他許多方法一樣。Bootstrap手機菜單停止工作?

我目前正在Wordpress中實現Bootstrap並構建自己的主題。我真的很喜歡Bootstrap,但現在開始討厭所有類的臭蟲。或者另一個想法是,我真的很喜歡bootstrapping!幫幫我!!這裏是我的代碼...: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'); 

回答

0

你的引導.js文件沒有JQuery作爲依賴項。自從它已經在WordPress以來,你不必排隊JQuery。當你像使用main.js文件一樣對引導js文件進行排隊時,只需將它作爲依賴項添加即可。

+0

我已經嘗試做到這一點,當我做到這一點我得到這個「bootstrap.min.js?ver = 4.5.2:6未捕獲的錯誤:Bootstrap的JavaScript需要jQuery」 – user3289402

+0

哦,我找到了一個解決方案。當我像你說的那樣刪除隊列時,我只需要把「wp_enqueue_script('bootstrap_js','//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');」在另外兩個wp_enqueue_script下面,我的手機切換開始運行了!謝謝:) – user3289402

+0

不客氣。隨意選擇我的答案 –