2017-06-07 19 views
0

私はワードプレスのウェブサイトを開発しており、ブートストラップを使用しています。ブートストラップ - ドロップダウンメニューとモバイルメニューが機能しない

私のメニューにはドロップダウンメニューを許可する必要がありますが、クリックすると何も表示されませんが、コードを調べると<li>があります。

モバイルでは、トグルが表示されますが、クリックすると開くことができません。私はクリックしても何も表示されないとき、私はドムの変化を参照

私のHTMLはこれで、メニューは大画面で完全に表示されます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid no-padding"> 
 
    <div class="row no-margin"> 
 
     <div class="col-xs-4 col-sm-4 col-md-3 logo"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="/site/"> 
 
      <img alt="site" src="<?php bloginfo('template_url')?>/images/logo.png"> 
 
        </a> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-9 no-padding"> 
 
     <div class="menu-operations"> 
 
      <div class="languages"> 
 

 
      </div> 
 
      <div class="social"> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-9 no-padding"> 
 
     <div class="navbar-header logo-vertical"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        </button> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-12 col-md-9 no-padding"> 
 
     <div class="menu"> 
 
      <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> 
 
      <ul id="menu-menuprincipal" class="nav navbar-nav navbar-right"> 
 
       <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a title="Empresa" href="">Empresa</a></li> 
 
       <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-37 dropdown"><a title="Produção" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Produção <span class="caret"></span></a> 
 
       <ul role="menu" class=" dropdown-menu"> 
 
        <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-38 active"><a title="Produção" href="">Produção</a></li> 
 
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Equipamentos" href="">Equipamentos</a></li> 
 
       </ul> 
 
       </li> 
 
       <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a title="Mercados" href="">Mercados</a></li> 
 
       <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30 dropdown"><a title="Qualidade e Ambiente" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Qualidade e Ambiente <span class="caret"></span></a> 
 
       <ul role="menu" class=" dropdown-menu"> 
 
        <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a title="Qualidade" href="">Qualidade</a></li> 
 
        <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a title="Ambiente" href="">Ambiente</a></li> 
 
       </ul> 
 
       </li> 
 
       <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a title="Notícias" href="">Notícias</a></li> 
 
       <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a title="Contactos" href="">Contactos</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

+0

生成されたHTMLコードでPHPセクションを置き換えてください。 –

+0

その中のphpでは難しいと言われていますが、どこでも 'dropdown-menu'クラスは必要ありません。 htmlが正しいことを確認するためにドキュメントをチェックしてください。 – sn3ll

+0

私はPHPによって生成されたhtmlで質問を更新しています。 @ J.Titus – user3242861

答えて

1

あなたのページにjqueryのをインポートする必要がまず第一。再度試して何が起こるかを表示してください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
関連する問題