Question

基本上我想点击一个标签，然后出现一个下拉菜单，然后当你重新点击相同的标签或任何其他标签时，我希望它隐藏该标签/显示另一个标签，如果点击相同/其他标签

我试过

$('.click').click(function() {
    $(this).find('.sub-nav-list').toggleClass('active');
});

并尝试了

$('.click').click(function() {
    $('.sub-nav-list').removeClass('active');
    $(this).find('.sub-nav-list').toggleClass('active');
});

但不能解决它！任何见解？感谢

HTML：

<nav class="secondary-nav">
    <ul class="list clearfix">
        <li class="leaders click">Leadership <span class="arrow">&gt;</span>
            <ul class="sub-nav-list">
                <li><a href="">Management</a></li>
                <li><a href="">Board of Directors</a></li>
            </ul>
        </li>
        <li class="contact click">Contact Info <span class="arrow">&gt;</span>
            <ul class="sub-nav-list">
                <li><a href="">Email Notification</a></li>
                <li><a href="">Information Request</a></li>
            </ul>
        </li>
        <li class="docs click">Documents <span class="arrow">&gt;</span>
            <ul class="sub-nav-list">
                <li><a href="">Governance Documents</a></li>
                <li><a href="">Press Release</a></li>
                <li><a href="">Reports &amp; Presentations</a></li>
                <li><a href="">Sec Filings</a></li>
                <li><a href="">Frenquently Asked Questions</a></li>
                <li><a href="">Tax Information</a></li>
            </ul>   
        </li>
        <li class="research click">Research <span class="arrow">&gt;</span>
            <ul class="sub-nav-list">
                <li><a href="">Dividends and Distributions</a></li>
                <li><a href="">Stock Information</a></li>
                <li><a href="">Analyst Coverage</a></li>
                <li><a href="">Market Makers</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

我至少可以看到两个可能的问题。

1）sub-nav-list不是click元素的子元素。如果它们处于相同的水平，那么可能会起作用：

$('.click').click(function() {
    $(this).parent().find('.sub-nav-list').toggleClass('active');
});

2）你有动态生成的这些元素 - 所以你需要在动态生成子菜单之前使用on和任何父元素的选择器（比如nav-list）：

$(".click").on("click", ".nav-list", function() {
  $(this).parent().find('.sub-nav-list').toggleClass('active');
});

单击元素时的.click（）功能

1 个答案: