javascript - 切换 anchor 仅在第一个 child 中工作？

Question

我一直在努力让“.accordion-media-types a”的第一个 child 工作。目前，每个 anchor 都在切换和获取“.accordion-media-types”的样式，而它们应该是一个看起来很常规的链接，所以我只需要第一个就可以工作，这有可能吗？

http://jsfiddle.net/0mpuh2f2/8/

html:

 <ul class="accordion-media-types">
    <li>    
        <a href="">Info</a>
        <div class="hidden-content">
           <ul>
              <li>
                 <a href="">link</a>
              </li>
           </ul>
        </div>
    </li>
</ul>

js:

$(document).on('click', '.accordion-media-types a', function (e) {
   e.preventDefault();
   $(this).closest('.accordion-media-types').toggleClass('active').find('.hidden-   content').slideToggle(500);
});

在此先感谢您的帮助!

Answer 1

您可以使用直接子选择器:.accordion-media-types > li > a:

$(document).on('click', '.accordion-media-types > li > a', function (e) {
    e.preventDefault();
    $(this).closest('li').toggleClass('active').find('.hidden-content').slideToggle(500);
});

阅读有关子选择器的信息 here .

另请注意，您可能只想切换最近的 li 隐藏内容，而不是一次切换所有内容。

演示:http://jsfiddle.net/0mpuh2f2/11/