prependトリガーを使用したjQueryドロップダウンメニュー

Question

jQueryを使用してメニューにトリガーを追加し、そのトリガーに子エレメントを切り替えることを試みています。以下のコードは、jQueryプリペンドを使用しているときにサブメニューを開きません。

HTML

<ul> 
    <li class="menu-item-has-children">Item 1</li> 
    <ul class="sub-menu"> 
     <li>Sub Item 1</li> 
     <li>Sub Item 2</li> 
     <li class="menu-item-has-children">Sub Item 3</li> 
     <ul class="sub-menu"> 
      <li>Sub Sub Item 1</li> 
      <li>Sub Sub Item 2</li> 
      <li>Sub Sub Item 3</li> 
      <li>Sub Sub Item 4</li> 
      <li>Sub Sub Item 5</li> 
     </ul> 
     <li>Sub Item 4</li> 
     <li>Sub Item 5</li> 
    </ul> 
</ul> 

CSS

ul li { 
list-style-type:none; 
} 
.open { 
    width:20px; 
    height:20px; 
    background-color:red; 
    color:#fff; 
    display:block; 
    cursor:pointer; 
    text-align:center; 
} 
.sub-menu { 
    display:none; 
} 

JS

jQuery(document).ready(function() { 
jQuery('.menu-item-has-children').prepend ('<a class="open">+</a>'); 
    jQuery('.open').click(function() { 
     jQuery(this).next('.sub-menu').toggle(); 
    }); 
}); 

JS FIDDLE

ありがとう！

Answer 1

あなたのコードに関する問題は、JSではなくあなたのHTMLです。

ジョセフMarikleが述べたように：あなたのul

は、コンテンツに順番にしばしば は、ネストされた<ol>または<ul>要素を含むゼロ以上<li>要素を、許可しました。

は、li以外の子要素を持たないようにしてください。

あなたの場合、要素.openは兄弟を持たないため、.next()は.sub-menuが見つかりません。

あなたはli.menu-item-has-childrenあなたJSだけで正常に動作の内側にあなたの内ulを移動した場合：

jQuery(document).ready(function() { 
 
    jQuery('.menu-item-has-children').prepend('<a class="open">+</a>'); 
 
    jQuery('.open').click(function() { 
 
    jQuery(this).next('.sub-menu').toggle(); 
 
    }); 
 
});

ul li { 
 
    list-style-type: none; 
 
} 
 

 
.open { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: red; 
 
    color: #fff; 
 
    display: block; 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 

 
.sub-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu-item-has-children">Item 1 
 
    <ul class="sub-menu"> 
 
     <li>Sub Item 1</li> 
 
     <li class="menu-item-has-children">Sub Item 3 
 
     <ul class="sub-menu"> 
 
      <li>Sub Sub Item 1</li> 
 
     </ul> 
 
     </li> 
 
     <li>Sub Item 4</li> 
 
    </ul> 
 
    </li> 
 
</ul>