Question

使用切换创建了一个侧面导航，但它没有按下它下面的文本。我修改了http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/中找到的代码。我无法修改正文内容/标签或jQuery版本（这是一个非常封闭的系统。但是，我可以在脚本标签中修改css）。它正在做我想做的事情，但它并没有推动原始教程中的文本。我错过了什么？

提前致谢。

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

Answer 1

问题是您的父li标记在CSS中指定了高度。当子ul标签滑出时，父级不能扩展超过指定的高度。摆脱CSS中的高度解决了这个问题。

这是没有高度的更新的JSFiddle - http://jsfiddle.net/gPxbn/2/

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

jQuery幻灯片切换无法正常工作

2 个答案: