Question

我创建了一个下拉菜单，可在单击父元素时切换下拉列表。但是，目前，单击某个项目时会打开所有下拉菜单。我知道我需要使用$ this，但我无法弄清楚应用它的位置。

以下是当前代码：

// When the parent element is clicked...
jQuery('#menu-main li.has-dropdown a').click(function() {

     // The dropdown will toggle open/close
     jQuery('#top-bar-wrapper .top-bar.expanded .top-bar-section .dropdown').toggle();
});

这是HTML：

<div id="top-bar-wrapper">
    <nav class="top-bar expanded">  
        <section class="top-bar-section">
            <ul id="menu-main">
                <li><a href="#">No Dropdown</a></li>
                <li class="has-dropdown"><a href="#">Dropdown Menu</a></li>
                    <ul class="dropdown">
                        <li><a href="#">Dropdown One</a></li>
                        <li><a href="#">Dropdown Two</a></li>
                        <li><a href="#">Dropdown Three</a></li>
                    </ul>
                </li>
                <li><a href="#">No Dropdown 2</a></li>
                <li class="has-dropdown"><a href="#">Dropdown Menu 2</a></li>
                    <ul class="dropdown">
                        <li><a href="#">Dropdown One</a></li>
                        <li><a href="#">Dropdown Two</a></li>
                        <li><a href="#">Dropdown Three</a></li>
                   </ul>
               </li>
        </section>
    </nav>
</div>

Answer 1

鉴于您提供的HTML，以下内容将起作用：

$('#menu-main li.has-dropdown > a').off('click').on('click', function() {
    $(this).closest('li').next('.dropdown').toggle();
});

Example Here

关键是使用$(this)获取被点击元素的上下文。上面的代码段会切换点击元素的下一个兄弟与类dropdown的可见性。

使用Jquery $ this进行下拉菜单

1 个答案: