-1

I use ver 3.2.1.min.js with bootstrap4..So as you see in the example that what happen with me slide1 take display none and i don't knew why that happen.. what i want is when click slide1...slide2 go down and when click again slide2 go up 

$("ul .slide1").toggle(function(){
  $("ul .slide1 .slide2").slideDown("slow");
}, function(){
  $("ul .slide1 .slide2").slideUp("slow");
})
ul .slide1 {
  display: block;
}
ul .slide1 .slide2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    Hello world1
  </li>
  <li class="slide1">
    Hello world2
    <ul class="slide2">
      <li>hello hello hello</li>
      <li>hello hello hello</li>
      <li>hello hello hello</li>
    </ul>
  </li>
  <li>
    Hello world3
  </li>
</ul>
Mohamed Hassan
  • 129
  • 1
  • 1
  • 9

2 Answers2

1

You need to set up a click event handler so that the operation happens when you want it to. And, you don't need .slideDown() and .slideUp() calls because that's what .toggle() does.

Also, the following is unnecessary:

ul .slide1 {
  display: block;
}

because li elements are block elements by default.

// When the .slide1 list item gets clicked...
$(".slide1").on("click", function(){
  $("ul .slide1 .slide2").toggle("slow");   // Toggle the visibilty of .slide2
});
.slide1 { cursor:pointer; } /* Visual clue to user that this can be clicked */
.slide2 { display:none; }   /* Hidden by default */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hello world1</li>
  <li class="slide1">Hello world2
    <ul class="slide2">
      <li>hello hello hello</li>
      <li>hello hello hello</li>
      <li>hello hello hello</li>
    </ul>
  </li>
  <li>Hello world3</li>
</ul>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
-1

The toggle needs some sort of trigger. The click, as you indicate you want, has to be handled. Inside the click trigger, you can handle the toggling. Perhaps something like this:

$("ul").on("click", function() {
  $("ul .slide1").toggle(function() {
    $("ul .slide1 .slide2").slideDown("slow");
  }, function() {
    $("ul .slide1 .slide2").slideUp("slow");
  })
})
ul .slide1 {
  display: block;
}

ul .slide1 .slide2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    Hello world1
  </li>
  <li class="slide1">
    Hello world2
    <ul class="slide2">
      <li>hello hello hello</li>
      <li>hello hello hello</li>
      <li>hello hello hello</li>
    </ul>
  </li>
  <li>
    Hello world3
  </li>
</ul>
Snowmonkey
  • 3,716
  • 1
  • 16
  • 16
  • 1
    Note that this still uses the old `toggle()` method which has been deprecated and removed from jQuery http://api.jquery.com/toggle-event/ – Rory McCrossan Jan 12 '18 at 16:29
  • So, as it has been removed... why is it working? Not argumentative, just curious. – Snowmonkey Jan 12 '18 at 16:30
  • Really? https://jsfiddle.net/snowMonkey/gLazjttp/ -- That fiddle uses 3.2.1, and it still behaves exactly the same. – Snowmonkey Jan 12 '18 at 16:30
  • @Snowmonkey I think you are confusing what a client chooses to support vs. what deprecated actually means. Just because "it works" doesn't mean it will work everywhere and for an indefinite period of time. Some client somewhere may still support ``, but that doesn't mean you should feel good about using it. – Scott Marcus Jan 12 '18 at 16:33
  • It's also not entirely working as the `li` elements within `.slide2` are not being displayed as they should be: https://jsfiddle.net/gLazjttp/1/. I would assume that the functions you're providing to the new `toggle()` method is somehow matching one of the argument signatures and invoking as a result. – Rory McCrossan Jan 12 '18 at 16:35
  • Read the docs -- that particular function signature has been removed, but the toggle() effect method remains, from what I'm reading. – Snowmonkey Jan 12 '18 at 16:35
  • @Snowmonkey You are correct (and that's why my answer uses `.toggle()`), but my comments were referencing your comments about it's OK to use something if "it works". – Scott Marcus Jan 12 '18 at 16:37
  • @ScottMarcus I completely agree with you, and I really don't mean it as a blanket statement -- but to say that this method has been deprecated and removed from jQuery was the misinformation I was choosing to challenge. That particular signature was removed, yes, but Rory McCrossan's generalization was wrong, that the toggle method had been removed entirely. And note, there's a difference between legacy support for cross-browser elements, and "removed" functionality from a library/framework. – Snowmonkey Jan 12 '18 at 16:41
  • And I too would dearly love to know why the downvotes. Someone's knickers get in a twist? – Snowmonkey Jan 12 '18 at 16:41