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');