コード

Question

ページで

クリック可能にします。私が知りたいのは、 ".... addClass（ 'enabled'）;"代わりに、親メニュー項目をクリック可能にするには？

メニューにカスタムリンクを入れたくない、ブートストラップファイルを変更したくない、外部のjquery（ ".js"）ファイル以外のファイルを変更したくない私自身のWordPressテーマ、私のテーマファイル（header.php、page.phpなど）はもちろんです。

私はこのようなwp_nav_menuにドロップダウン・トグルクラスを追加しようとしました：

menu_class' => 'list_no_decoration dropdown-toggle',

と、単純に上記のコードを変更：、

jQuery('ul li > a.dropdown-toggle').addClass('enabled');

しかし、悲しいことに親メニュー項目はまだクリックできません。私はこのソリューションが非常にシンプルで、他のテーマでも簡単に繰り返すことができますので、私はデザインを完成させるのが大好きです。

次のように私の現在のコードが見えます：

：

ul.list_no_decoration { /* "list_no_decoration" as per menu_class in wp_nav_menu */ 
    list-style: none; 
    border:0; /* Reset */ 
    margin:0; /* Reset */ 
    padding:0; /* Reset */ 
    outline:0; /* Reset */ 
} 
ul.list_no_decoration#top_nav { 
    vertical-align: top; 
    top:0; 
    width:99.9%; 
    padding-left: 0.05%; 
    margin: 0 auto; 
    display: inline-block; 
    font-size: 0; 
    text-align: center; 
} 
ul.list_no_decoration#top_nav li { 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid white; 
    padding: 0 10px; 
    line-height: 30px; 
    height: 30px; 
    width: 120px; 
} 
ul.list_no_decoration#top_nav li a { 
    font-size: 10pt; 
    font-weight: bold; 
    color: #fff; 
    text-decoration: none; 
} 
ul.list_no_decoration#top_nav li > a:link { 
} 
ul.list_no_decoration#top_nav a:visited { 
    font-size: 14pt; 
    text-decoration: none; 
    color: #fff; 
} 
ul.list_no_decoration#top_nav a:active { 
    font-size: 14pt; 
    text-decoration: none; 
    color: #fff; 
} 
ul.list_no_decoration#top_nav > li > a:hover { 
} 

/* sub-level menu item */ 
ul.sub-menu { 
    position: absolute; 
    width: 120px; 
    border:0; /* Reset */ 
    margin:0; /* Reset */ 
    padding:0; /* Reset */ 
    outline:0; /* Reset */ 
} 
ul.sub-menu li { 
    position: relative; 
    display: block; 
    border:0; /* Reset */ 
    margin:0; /* Reset */ 
    padding:0; /* Reset */ 
    outline:0; /* Reset */ 
    top: 30px; 
    left: -11px; 
    background-color:black; 
} 
ul.list_no_decoration#top_nav > li ul { 
    vertical-align: top; 
    top: 0; 
    border:0; /* Reset */ 
    margin:0; /* Reset */ 
    padding:0; /* Reset */ 
    outline:0; /* Reset */ 
    display: none; /* display: none; to make it invisible until hover */ 
} 
ul.list_no_decoration#top_nav > li:hover ul { 
    display: block; 
} 

header.phpの

<div class="container-fluid" id="header_nav"> 
    <div class="row" id="main_nav_row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="header_nav_col"> 
     <span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-chevron-down"></span> 
     <?php 
      wp_nav_menu(
       array(
        'sort_column' => 'menu_order', 
        'menu' => 'Categories', 
        'container_class' => 'main-menu', 
        'container_id' => 'header', 
        'theme_location' => 'header', 
        'menu_class' => 'list_no_decoration', 
        'menu_id' => 'top_nav', 
       ) 
      ); 
     ?> 
    </div> 
    </div> 
</div> 

style.cssには、ここのメニューは、現在次のようになります。

enter image description here

Answer 1

ちょうど私たちが見ていることができ、あなたのコード/ウェブサイトへのリンクがあり、このいけないようなあなたのHTMLは、あなたのドロップダウンのみ親メニュー

<nav> 
    <ul id="menu"> 
    <li><a href="YOUR_LINK_HERE">MENU</a> 
     <ul> 
      <li>display 1</li> 
      <li>display 2</li> 
      <li>display 3</li> 
      <li>display 4</li> 
     </ul> 
    </li> 
    </ul> 
</nav>