jQuery slide toggle not working properly_问答_开发者

jQuery slide toggle not working properly

开发者 https://www.devze.com 2023-03-30 22:48 出处：网络

Created a side nav with toggle but it not pushing the text that is underneath it. I modifiedthe code that I found in http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/.

相关专题：jquery

Created a side nav with toggle but it not pushing the text that is underneath it. I modified the code that I found in http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/. I cannot modify the body content/tag or the jQuery version (It's a very closed system. However, I can modify the css with in script tags). It is doing what I wanted to do, however it is not pushing the text as it was on the original tutorial. What am I missing?

Thanks in advance.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$("#linkListSub3 li ul").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("#linkListSub3 li").click(function(){
    $(this).toggleClass("active");
    $("ul",this).slideToggle("slow");

    return false; //Prevent the browser jump to the link anchor
});
});
</script>


<style type="text/css">

body {
background-color:#333;
font-family:Arial, Helvetica, sans-serif;
}

ul{
margin:0;
padding:0;
}

li{
margin:0;
padding:0;
list-style:none;
}


#linkList3{
background-color:#4f90b0;
width:200px;
padding:10px;
}

#linkListSub3 li {
height: 35px;
line-height: 35px;
width: 200px;
font-size: .9em;
font-weight: normal;
float: left;
}

#linkListSub3 li a {
color: #fff;
text-decoration: none;
display: block;
}

#linkListSub3 li a:hover {
color: #ccc;
}

#linkListSub3 li.active {
background-color:#444;

} 

#linkListSub3 li a.submenu {

border-top: 1px solid #d6d6d6;
background-color:#444;
overflow: hidden;
font-size: .8em;
width:200px;
clear: both;
} 

</style>

</head>


<body>
<div id="linkList3" style="width: 200px; height: 1000px; ">
<div id="linkListSub3" style="width: 200px;">

<ul style="width: 200px">
  <li id="id-30683"><a href="/Section.aspx?id=31" target="_self"><span id="navArrow">&nbsp;&nbsp;&nbsp;&nbsp;</span>About</a>开发者_如何学Go;
    <ul style="margin-left:0px;">
      <li id="id-30692"><a href="/Section.aspx?id=31" class="submenu" target="_self">About Us</a></li>
      <li id="id-30693"><a href="/what-we-do.aspx" class="submenu" target="_self">What We Do</a></li>

    </ul>
  </li>


  <li id="id-30684"><a href="/Section.aspx?id=2820" target="_self"><span id="navArrow">&nbsp;&nbsp;&nbsp;&nbsp;</span>Social Justice</a>
    <ul style="margin-left:0px;">
      <li id="id-30699"><a href="/Section.aspx?id=2820" class="submenu" target="_self">Overview</a></li>
      <li id="id-30700"><a href="/page.aspx?id=222013" class="submenu" target="_self">Economic Response</a></li>
    </ul>
  </li>



</ul>
</div>
</div>

The problem is that your parent li tags have a height specified in the CSS. When the child ul tags slide out, the parent cannot expand further than the specified height. Getting rid of the height in the CSS solves this issue.

Here is the updated JSFiddle without a height - http://jsfiddle.net/gPxbn/2/

$("#linkListSub3 li").click(function(){
    $(this).toggleClass("active");
    $("ul",this).slideToggle("slow"); // is this line correct?
    $(this).slideToggle("slow"); //should it be like this?
    return false; //Prevent the browser jump to the link anchor
});