CODEWITHSUNDEEP
javascriptjquery
Anake.me
Anake.me

Reputation: 467

Multiple dropdown menus triggering on the same click event

I have the following code from this link which seems to trigger the slideToggle event for both drop-down menus. I can't seem to find a solution to triggering only the child drop-down menu of the clicked li element.

A jQuery solution would be best if possible!

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>

Upvotes: 2

Views: 180

Answers (1)

SKJ
SKJ

Reputation: 2326

You need to check in your click event

$('.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>

Upvotes: 1

Related Questions