2016-06-07 2 views
0

이것은 부트 스트랩 모바일 토글로 인해 실제로이 성가신 문제가있는 두 번째 사례입니다. 문제가 무엇인지 모르지만 잠시 후 메뉴 토글 버튼이 작동을 멈 춥니 다. 몇 시간 동안 웹을 검색해 본 결과 데이터 타겟 ID 인 내 문제 일 수 있다고 생각했습니다. 그러나 나는 다른 많은 방법들과 마찬가지로 그것을 시도했다.부트 스트랩 모바일 메뉴가 작동하지 않습니까?

저는 현재 Wordpress에 부트 스트랩을 구현하고 내 테마를 만들고 있습니다. 나는 Bootstrap을 정말 좋아하지만, 지금은 모든 클래스 och 버그로 그것을 싫어하기 시작했다. 아니면 또 다른 생각은 내가 정말 부트 스트랩에 빨려있다! 도움!! 여기 내 코드는 ...입니다 : 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 잡히지 않은 오류 : 부트 스트랩의 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

당신은 오신 것을 환영합니다. 내 대답을 자유롭게 선택하십시오. –

관련 문제