初始崩溃
我已经使用html编码和jquery创建了一个菜单，例如
<ul>
<li>
level 2
<ul>
<li>level 2.1
<ul>
<li>a1
<li>a2
</ul></li>
<li>b</li>
</ul>
</li>
<li>
level 3
<ul>
<li>
level 4
<ul>
<li>c</li>
<li>d</li>
</ul>
</li>
<li>e</li>
<li>f</li>
</ul>
</li>
</ul>
以上是html编码，jquery在下面:
$('li').click(function(ev) {
$(this).find('>ul').slideToggle();
ev.stopPropagation();
});
和我得到的输出，如当我点击第2级，它被展开，但当我展开第3级，第2级也应该崩溃，如果在第2级，如果第2.1级展开，那么它应该展开。
只有在添加结束标签时才会传播。
看这部分:
<li>level 2.1
<ul>
<li>a1
<li>a2
</ul></li>
没有关闭的</li>标签。
小提琴:http://jsbin.com/ibiceh/1
初始崩溃
在$(document).ready()功能中增加$('li > ul').hide();:
$(document).ready(function(){
$('li').click(function(ev) {
$(this).find('>ul').slideToggle();
ev.stopPropagation();
});
$('li > ul').hide();
});
小提琴:http://jsbin.com/ibiceh/2/
我想你正在找这个:
$(document).ready(function(){
$('li').click(function(e) {
e.stopPropagation();
$(this).children('ul').show();
$(this).prev().children('ul').hide();
$(this).siblings().children('ul li ul').hide();
$(this).next().children('ul').hide();
});
$('li > ul').hide();
});
Checkout bin: http://jsbin.com/ebapay/1/edit
我的问题是通过编辑前面给出的代码解决的。但现在我面临着一个不同的问题。我的Html代码是:
<body>
<ul>
<li><a href="#">Academic Programme</a>
<ul>
<li><a href="#">Under Graduate</a></li>
<li><a href="#">Post Graduate</a></li>
<li><a href="#">Ph. D</a></li>
</ul>
</li>
<li><a href="#">People</a>
<ul>
<li><a href="#">Director</a>
<li><a href="#">Faculty</a>
<ul>
<li><a href="#">Computer Engineering</a></li>
<li><a href="#">Information Technology</a></li>
<li><a href="#">Electronics & Communication Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Mechanical Engineering</a></li>
<li><a href="#">Automobile Engineering</a></li>
<li><a href="#">Electrical Engineering</a></li>
</ul>
<li><a href="#">Technical Staff</a>
<li><a href="#">Administrator Staff</a>
<li><a href="#">Supporting Staff</a>
</ul>
</li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Computer Engineering</a></li>
<li><a href="#">Information Technology</a></li>
<li><a href="#">Electronics & Communication Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Mechanical Engineering</a></li>
<li><a href="#">Automobile Engineering</a></li>
<li><a href="#">Electrical Engineering</a></li>
</ul>
</li>
<li><a href="#">Amenities</a></li>
<li><a href="#">Library
<li><a href="#">Admission</a>
<ul>
<li><a href="#">UTU</a></li>
<li><a href="#">GTU</a></li>
</ul>
</li>
<li><a href="#">Student Corner</a></li>
<li><a href="#">Circular</a></li>
<li><a href="#">News&Events</a></li>
</ul>
我的jquery是:
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li').click(function(ev) {
ev.stopPropagation();
$(this).children('ul').fadeIn();
$(this).prev().children('ul').children('li').children('ul').fadeOut();
$(this).prev().children('ul').fadeOut();
$(this).next().children('ul').fadeOut();
$(this).next().children('ul').children('li').children('ul').fadeOut();
});
$('li > ul').hide();
});
</script>
But now i am facing problem of prev and next. Suppose in given HTML form if i had expnaded people then if i will expand admission then people is not collapsed so do any have alternative for prev() and next(). Thank you.