使子导航向下滑动和向上滑动切换

Question

Here's what I'm trying to do:

• Create a navigation with a sub-nav or child page.

• When the user clicks on about, I want the about to toggle the Bob li.

• It should slide down and slide up when clicked on and off of about.

 $(document).ready(function() { $("#grab").click(function() { $(".sub-nav").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav"> <li id="#grab">About <ul class="sub-nav"> <li>Bob</li> </ul> </li> <li>Contact</li> <li>Faqs</li> </ul> 

Answer 1

Your HTML is wrong you have a hashtag before grab id="#grab" it should be id="grab" by default the li contain "Bob" will be show to resolve this issue, add display:none; to the ul either through a class or inline

 $(document).ready(function() { $("#grab").click(function() { $(".sub-nav").stop().slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav"> <li id="grab">About <ul style="display:none" class="sub-nav"> <li >Bob</li> </ul> </li> <li>Contact</li> <li>Faqs</li> </ul> 

Answer 2

The # is used to reference id, in your tag you're seting the id as #grab , and in your jquery you're setting the .click() event to the class grab . Then you'll need to change your <li> id to grab :

<li id="grab">

---

You can add display: none to your <ul> . In that way, when the page load, the sub-nav starts hidden:

You can set this on the tag:

<ul class="sub-nav" style="display: none;">

Or in your css:

.sub-nav{
  display: none;
}