在同一个点击事件上触发多个下拉菜单

Question

我有以下来自 this link 的代码，它似乎触发了两个下拉菜单的 slideToggle 事件。我似乎找不到仅触发被点击的 li 元素的子下拉菜单的解决方案。

如果可能，最好使用 jQuery 解决方案！

var hi = $( '.header-item.has-sub' );
var hdd = hi.children( '.header-sub' );

hi.each(function() {
    $(this).click(function() {
        hdd.toggleClass( 'open' );
        hdd.slideToggle( 'fast' );
    });
});

ul li > ul {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-menu">

    <li class="header-item">
        <a href="#">
            <i class="uil uil-cog"></i>
            <span>Settings</span>
        </a>
    </li>

    <li class="header-item has-sub">
        <a href="#">
            <i class="uil uil-bell"></i>
            <span>Notifications</span>
        </a>
        <ul class="header-sub">

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-edit"></i>
                    <span>Details</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-map-marker"></i>
                    <span>Address</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-signout"></i>
                    <span>Log Out</span>
                </a>
            </li>

        </ul>
    </li>

    <li class="header-item has-sub">
        <a href="#">
            <i class="uil uil-user"></i>
            <span>Profile</span>
        </a>

        <ul class="header-sub">

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-edit"></i>
                    <span>Details</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-map-marker"></i>
                    <span>Address</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-signout"></i>
                    <span>Log Out</span>
                </a>
            </li>

        </ul>
    </li>

</ul>

Answer 1

您需要签入您的点击事件

$('.header-item.has-sub').click(function() {
    var hdd = $(this).find('ul.header-sub');
    $(hdd).toggleClass('open').slideToggle('fast');
});

ul li > ul {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-menu">

    <li class="header-item">
        <a href="#">
            <i class="uil uil-cog"></i>
            <span>Settings</span>
        </a>
    </li>

    <li class="header-item has-sub">
        <a href="#">
            <i class="uil uil-bell"></i>
            <span>Notifications</span>
        </a>
        <ul class="header-sub">

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-edit"></i>
                    <span>Details</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-map-marker"></i>
                    <span>Address</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-signout"></i>
                    <span>Log Out</span>
                </a>
            </li>

        </ul>
    </li>

    <li class="header-item has-sub">
        <a href="#">
            <i class="uil uil-user"></i>
            <span>Profile</span>
        </a>

        <ul class="header-sub">

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-edit"></i>
                    <span>Details</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-map-marker"></i>
                    <span>Address</span>
                </a>
            </li>

            <li class="sub-item">
                <a href="#">
                    <i class="uil uil-signout"></i>
                    <span>Log Out</span>
                </a>
            </li>

        </ul>
    </li>

</ul>