Make sub nav slidedown and slideup toggle

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>

---

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> 

---

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;
}

链接地址: http://www.djcxy.com/p/83980.html

上一篇: 单击外部时关闭对话框

下一篇: 使子导航滑动并滑动切换