当用户点击ABC时,它应该转到abc.php。但它不会。如果我在jquery代码中返回true,则单击Sub时它不会向下滑动。请给我一个解决方案。
<script type="text/javascript">
$js(document).ready(function() {
//Class 'contentContainer' refers to 'li' that has child with it.
//By default the child ul of 'contentContainer' will be set to 'display:none'
$js("#treeMenu li").toggle(
function() { // START FIRST CLICK FUNCTION
$js(this).children('ul').slideDown()
if ($js(this).hasClass('contentContainer')) {
$js(this).removeClass('contentContainer').addClass('contentViewing');
}
}, // END FIRST CLICK FUNCTION
function() { // START SECOND CLICK FUNCTION
$js(this).children('ul').slideUp()
if ($js(this).hasClass('contentViewing')) {
$js(this).removeClass('contentViewing').addClass('contentContainer');
}
} // END SECOND CLICK FUNCTIOn
//return true; If used this, slide down is not working
); // END TOGGLE FUNCTION
}); // END DOCUMENT READY
</script>
html如下
<div id="left_menu">
<h2 style="text-align: center;margin-bottom: 0px;color: #000000">Our Ministry</h2>
<ul id="treeMenu">
<li><a href="abc.php">ABC</a></li>
<li><a href="def.php">DEF</a></li>
<li><a href="ghi.php">GHI</a></li>
<li class="contentContainer"><a href="#">Sub</a>
<ul>
<li><a href="jkl.php">JKL</a></li>
<li><a href="mno.php">MNO</a></li>
<li><a href="pqr.php">PQR</a></li>
<li><a href="stu.php">STU</a></li>
</ul>
</li>
</ul>
</div>
答案 0 :(得分:0)
似乎你可以像这样简化:
http://jsfiddle.net/isherwood/8s923/3
<li class="parent contentContainer"><a href="#">Sub</a>
$(document).ready(function () {
$("#treeMenu li.parent > a").click(function (e) { // START FIRST CLICK FUNCTION
e.preventDefault();
$(this).closest('li').toggleClass('contentContainer contentViewing')
.children('ul').slideToggle();
}); // END TOGGLE FUNCTION
}); // END DOCUMENT READY
解决方案是仅将preventDefault
应用于操作下拉菜单的特定锚点,方法是为它们提供一个未切换的类。
不要忘记重新申请别名。