CODEWITHSUNDEEP
javascriptjquery
olqa101
olqa101

Reputation: 21

jQuery - toggle ul in li

I'm in the process of editing the menu.

Here is my code snippet:

$('.menu-toggle').click(function () {
  $(this).children('.sub-menu').slideToggle('slow');
})
a {
  text-decoration: none;
  color: white;
}

li {
    display: table;
    width: 100%;
    height: 5em;
}

li.menu-toggle {
    background-image: linear-gradient(0deg, red 1%, green 100%);
    background-color: red;
}

.menu-toggle ul {
    position: relative;
}

.menu-toggle ul li{
    background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-toggle">Toggle
  <ul class="sub-menu">
    <li><a href="#">Click here</a></li>
    <li><a href="#">Click here</a></li>
  </ul>
</li>

How to toggle ul under first li? Now the menu expands inside the first (clickable) li. I want the clickable element to always be above the expanded values (typical menu).

I tried different toggle combinations but unfortunately the result is always the same.

Upvotes: 0

Views: 202

Answers (2)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9953

Instead of $(this) use $(e.target).children('.sub-menu').slideToggle('slow');

Try this one:

$('.menu-toggle').click(function (e) {
    $(e.target).children('.sub-menu').slideToggle('slow');
})
    a {
            text-decoration: none;
            color: white;
        }

        li {
            display: table;
            width: 100%;
            height: 5em;
        }

            li.menu-toggle {
                background-image: linear-gradient(0deg, red 1%, green 100%);
                background-color: red;
            }

        .menu-toggle ul {
            position: relative;
        }

            .menu-toggle ul li {
                background-color: blue;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<li class="menu-toggle">
    Toggle
    <ul class="sub-menu">
        <li><a href="#">Click here</a></li>
        <li><a href="#">Click here</a></li>
    </ul>
</li>

Update based on OP's comment

You want parent element (blue li) has put at top of ul tag. So put the ul tag next to the li (It is better to use div instead ofli here).

And for your jQuery part use $(e.target).next().slideToggle('slow');

 $('.menu-toggle').click(function (e) {
            $(e.target).next().slideToggle('slow');
 })
  a {
            text-decoration: none;
            color: white;
        }

        li {
            display: table;
            width: 100%;
            height: 5em;
        }

            li.menu-toggle {
                background-image: linear-gradient(0deg, red 1%, green 100%);
                background-color: red;
            }

            ul li {
                background-color: blue;
            }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <li class="menu-toggle">
        Toggle
    </li>
    <ul class="sub-menu">
        <li><a href="#">Click here</a></li>
        <li><a href="#">Click here</a></li>
    </ul>

Upvotes: 1

BenTheHumanMan
BenTheHumanMan

Reputation: 327

You need to stop the submenu events from bubbling up to the parent element. https://api.jquery.com/event.stoppropagation/

$('.sub-menu').on('click', function(e) {
   e.stopPropagation()
})

Upvotes: 2

Related Questions