Javascript 如何仅选择类后的第一个元素？

我有一个下拉菜单。我希望它是动态的，所以我只能告诉导航中的li它是一个下拉列表，然后给它一个列表，这是下拉内容。问题是，当您单击带有.dropdown类的链接时，它会显示带有.dropdown内容类的所有元素。有没有想到一个智能选择器可以在这里工作

我的HTML：

    <li><a class="dropdown" href="#">Gallery</a>
        <ul class="dropdown-content">
            <li><a  href="#">Photos on me</a></li>
            <li><a  href="#">Photos of me</a></li>
            <li><a  href="#">Photos with me</a></li>
        </ul>
    </li>
    <li><a class="dropdown" href="#">Blog</a>
        <ul class="dropdown-content">
            <li><a  href="#">Photos on me</a></li>
            <li><a  href="#">Photos of me</a></li>
            <li><a  href="#">Photos with me</a></li>
        </ul>
    </li>

---

获取发生单击事件的元素，并从中找到要查找的兄弟类

$('.dropdown').click(function(){
    $(this).siblings('.dropdown-content').toggle(200);
});

或

---

获取发生单击事件的元素，并从中找到要查找的兄弟类

$('.dropdown').click(function(){
    $(this).siblings('.dropdown-content').toggle(200);
});

或

只需在代码中包含数据和id。这将解决您的问题

jsbin.com上的jsbin

作用{ $'。下拉列表。单击函数E{ var id=$this.data'toggle'； $+id.toggle； }; }; .下拉内容{ 显示：无； } JS-Bin 只需在代码中包含数据和id。这将解决您的问题

jsbin.com上的jsbin

作用{ $'。下拉列表。单击函数E{ var id=$this.data'toggle'； $+id.toggle； }; }; .下拉内容{ 显示：无； } JS-Bin

$('.dropdown').click(function(){
    $(this).next().toggle(200);
});