サブメニュートリガーを使用したjQueryメニュー

Question

クリックするとサブメニューを切り替えるHTMLメニューのトリガーを作成しようとしています。次のコードの問題は、トリガー（class = "open"）をクリックすると、すべてのサブメニュー項目を一度に切り替えることです。 jQueryを使用して、トリガーが1つのサブメニューを一度に切り替えるようにしたいと思います。ここに私のコードです：

HTML

<ul> 
<li class="menu-item-has-children">Item 1</li> 
    <a class="open">+</a> 
    <ul class="sub-menu"> 
    <li>Sub Item 1</li> 
    <li>Sub Item 2</li> 
    <li class="menu-item-has-children">Sub Item 3</li> 
    <a class="open">+</a> 
     <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> 

jQueryの

$(document).ready(function() { 
    $('.open').click(function() { 
    $('li.menu-item-has-children').parent().closest('.sub-menu').toggle(); 
    }); 
}); 

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; 
} 

VIEW THE JS FIDDLE HERE

ありがとうございました:)

Answer 1

ここに文脈はありませんthisここにあります。それは次のようになります。

$(document).ready(function() { 
    $('.open').click(function() { 
    $(this).next('.sub-menu').toggle(); 
    }); 
}); 

あなたが$('li.menu-item-has-children')を使用している場合、それは文字通りすべてのものとない時にクリックされています一つを選択します。 clickイベントを発生させた現在の要素は、thisというキーワードで取得できます。これを上に使って動作させています。サブメニューのような完全な構造は<a>に従っているので、上記のコードは.next()で動作します。

スニペット

$(document).ready(function() { 
 
    $('.open').click(function() { 
 
    $(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</li> 
 
    <a class="open">+</a> 
 
    <ul class="sub-menu"> 
 
    <li>Sub Item 1</li> 
 
    <li>Sub Item 2</li> 
 
    <li class="menu-item-has-children">Sub Item 3</li> 
 
    <a class="open">+</a> 
 
    <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>

JSFiddle：https://jsfiddle.net/bdh7seoh/

Answer 2

他のオプションは、あなたのsub-menuのための別のクラスを作成することです。

$(document).ready(function() { 
 
\t $('.open').click(function() { 
 
\t \t $('li.menu-item-has-children').parent().closest('.sub-menu').toggle(); 
 
    }); 
 
    
 
    $('.open-sub1').click(function() { 
 
\t \t $('.sub-menu1').toggle(); 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu-item-has-children">Item 1</li> 
 
    <a class="open">+</a> 
 
    <ul class="sub-menu"> 
 
     <li>Sub Item 1</li> 
 
     <li>Sub Item 2</li> 
 
     <li class="menu-item-has-children">Sub Item 3</li> 
 
     <a class="open-sub1">+</a> 
 
     <ul class="sub-menu1"> 
 
      <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>