javascript - 最初の要素を選択

Question

UL>LIのブロックを含むナビゲーションメニューを実装しようとしています。

<aside id="nav-container" role="complementary" style="width: 232px;">
  <nav class="overview" id="primary-nav" role="nav" style="display: block;">
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>The Basics</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Introduction</a></li>
      <li><a href="#" class="nav-link">A Chapter in the Zeitgeist Movement</a></li>
      <li><a href="#" class="nav-link">Getting Real with expectations</a></li>
      <li><a href="#" class="nav-link">Point of Focus in a chapter</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Setting up a National Chapter</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Gathering Volunteers &amp; Social Media</a></li>
      <li><a href="#" class="nav-link">Establishing a Website &amp; Tools</a></li>
      <li><a href="#" class="nav-link">Organising a Core Group</a></li>
      <li><a href="#" class="nav-link">Expanding into Regional Chapters</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Setting up a city or local Chapter</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Introduction</a></li>
      <li><a href="#" class="nav-link">Getting Started</a></li>
      <li><a href="#" class="nav-link">Raising Volunteers</a></li>
      <li><a href="#" class="nav-link">Organising a Core Group</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Organising Events</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Types of Events</a></li>
      <li><a href="#" class="nav-link">Finding a Space</a></li>
      <li><a href="#" class="nav-link">Gathering Materials</a></li>
      <li><a href="#" class="nav-link">Promoting the Event</a></li>
      <li><a href="#" class="nav-link">Executing the Event</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Organising Project Teams</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">“Your idea, your project” concept</a></li>
      <li><a href="#" class="nav-link">Guidelines</a></li>
      <li><a href="#" class="nav-link">Project Methodology</a></li>
      <li><a href="#" class="nav-link">Devising a Project Structure</a></li>
      <li><a href="#" class="nav-link">Organising Volunteers </a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Appendix</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Tips from Coordinators</a></li>
      <li><a href="#" class="nav-link">Tips on DVDs</a></li>
    </ul>
  </nav>
</aside>

最初はすべてが閉じています。h3をクリックすると、ulリストは次のようになります。

私はこのjavascriptコードを持っています：

  // menu open close
  this.leftMenuToggle = function () {
    var leftMenuToggle = $( ".section" ).on( "click", function( event ) {
      event.preventDefault();
      leftMenuToggle.toggleClass("active");
      leftMenuToggle.next().css('display', 'block');
      console.log('we clicked this menu item');
    });
  }

しかし、すべての.sectionアイテムが開きます。コードを変更して、[...]をクリックすると、子ulリストのみが開くようにする正しい方法は何ですか？

ありがとう

Answer 1

「this」は、jQueryハンドラーでクリックされた/現在の要素を指します。

$( ".section" ).on( "click", function( event ) {
  event.preventDefault();
  $(this).toggleClass("active").next("ul").css('display', 'block');
  console.log('we clicked this menu item');
});

Answer 2

次の方法で、ハードコードされたスタイルをリストから削除できます。リンクをクリックすると、リストが切り替わります。

Javascript

$('#nav-container').on('click', '.section', function(e) {
    e.preventDefault();

    var $shortcut = $(this).next();
    $('#nav-container ul.active').not($shortcut).removeClass('active');
    $shortcut.andSelf().toggleClass('active');
});

CSS

ul.active {
    display: block;
}

ul:not(.active) {
  display: none;
}

デモ

Answer 3

次のようなことができます。

 $('#nav-container .overview h3.section').on("click", function(event){
      event.preventDefault();
      $(this).toggleClass("active");

      $(this).next('#nav-container .overview ul.depth-1 shortcuts')..css('display', 'block');
 }

機能する理由: $(this) は、コード内で現在クリックされている要素を参照するため:

 var leftMenuToggle

jquery セレクターの結果、つまりすべてのセクションを参照します。

Answer 4

代わりにこれ：

leftMenuToggle.toggleClass("active");
leftMenuToggle.next().css('display', 'block');

これを行う：

$(this).toggleClass("active").next().css('display', 'block');

また：

$(this).toggleClass("active");
$('.active').next().css('display', 'block');