1

Would like to ask how should I make it one by one to open a dropdown. Currently, when I make a click event, all of them will open. Also how can I hide it back if it was not use?

Here's my code:

<script>
$( document ).ready(function() {
if ($(".dropdown-toggle").click(function() {
        $('.dropdown-menu').show();
        else {
        $('.dropdown-menu').hide();
        }
    });
});
</script>

Here's my HTML: 

<li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>

How can I make them open individually if I just click one of them.

Kobe Bryan
  • 317
  • 1
  • 3
  • 16

3 Answers3

1

Is this what you want?

$(document).ready(function() {
    $(".dropdown-menu").hide();
  $(".dropdown-toggle").click(function() {
    $(".dropdown-menu").hide();
    $(this).next(".dropdown-menu").show();
  });
});

Demo 

$(document).ready(function() {
    $(".dropdown-menu").hide();
  $(".dropdown-toggle").click(function() {
    $(".dropdown-menu").hide();
    $(this).next(".dropdown-menu").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
1

if ($(".dropdown-toggle").click(function() { totally is wrong and you don't need if and else here, just use click function then use $(this) and next() to find target ul then use fadeToggle() or slideToggle() to show/hide (or toggleClass()).

$(document).ready(function() {

 $(".dropdown-toggle").click(function(e) {
    e.preventDefault();
    $('.dropdown-menu').not($(this).next('.dropdown-menu')).fadeOut()
    $(this).next('.dropdown-menu').fadeToggle().toggleClass('isOpen');
  });
});
.dropdown-menu {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
Pedram
  • 15,766
  • 10
  • 44
  • 73
  • Pedram - the code is working but it was not smooth coz it goes to the header when clicked. – Kobe Bryan Feb 27 '18 at 12:51
  • *not smooth coz it goes to top when clicked* | I don't understand your mean. please explain more. @KobeBryan – Pedram Feb 27 '18 at 12:53
  • Pedram - one last question. How can I close the opened dropdown if I want to click another dropdown? – Kobe Bryan Feb 27 '18 at 13:00
  • Pedram -- quick question. how can I close the dropdown if I want to click from everywhere and it will automatically close? – Kobe Bryan Feb 27 '18 at 13:17
  • @KobeBryan Yeah, take a look at [this](https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) topic – Pedram Feb 27 '18 at 16:10
1

For better practice you should use .toggle(). Which allready checks if an element is visible.

$( document ).ready(function() {
   
    // Hide all dropdowns by default
    $(".dropdown-menu").hide();        

    $(".dropdown-toggle").click(function() {

        // .next() selects next sibling. In this case <ul class="dropdown-menu">
        $(this).next().toggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
Red
  • 6,599
  • 9
  • 43
  • 85