javascript - jquery 脚本中的toggle() 作用域

Question

我正在构建一个由包含隐藏描述的节点组成的技能树

单节点是这样的

<div class="node inactive-node root">
    <a href="#">Example Skill</a>
    <div class="info">
    <p class="cost">30</p>
    <div class="dropdown">
        <a href="#" class="dropdown-toggle"><b class="caret"></b></a>
           <div class="dropdown-menu">
               <a href="#">Example description</a>
           </div>
    </div>
    </div>  
</div>

下面的脚本可以明显地显示页面中的所有下拉菜单

var main = function() {     
    $('.dropdown-toggle').click( function() {
        $('.dropdown-menu').toggle(); 
    });
};

但我尝试过修复

var main = function() {     
    $('.dropdown-toggle').click( function() {
        $(this).children('.dropdown-menu').toggle(); 
    });
};

无效，我不知道为什么。我试图选择单击的下拉切换下的单个下拉菜单，但我无法理解如何操作。

Answer 1

它不是子元素。这是一个 sibling 。尝试使用 next()。

$(this).next().toggle();

或者

$(this).parent().find('.dropdown-menu').toggle();