jQuery的显示隐藏李和UL
问题描述:
我有follwing HTMLjQuery的显示隐藏李和UL
<ul class="shopp_categories">
<li class="current">
<a class="current" href="link">Gifts For Her</a>
<ul class="children active" style="display: none;">
<li><a>Hand Bag Holders</a></li>
</ul>
</li>
<li><a href="link">Gifts ForHim</a></li>
<li><a href="link">Innovative Gifts</a></li>
<li><a href="link">Jewellery</a>
<ul class="children" style="display: none;">
<li><a>Alrun Runes</a></li>
</ul>
</li>
</ul>
及以下的jQuery
jQuery(document).ready(function() {
$('ul ul').hide();
$('ul.children active').show();
$('ul.children li a').removeAttr("href");
$('ul.children li > a').mouseover(function(event) {
$('ul ul').hide('slow');
$(this).parent().find('ul').toggle('slow');
});
});
我能得到孩子UL的隐瞒,但我不能让他们过上鼠标显示或保持开放,如果他们是活跃
答
,以防止它们藏匿在激活时,你只需要一个if语句,是这样的:
if(!$(this).hasClass('active')){ //if it doesn't have the class active
$(this).hide();
}
关于您提到的第一个问题,当您隐藏一个元素时,它将获得样式display:none
。那时,没有鼠标事件可以触发元素。您不能单击它,将鼠标移到它上面,将鼠标移出它等,因为它已从渲染文档中移除。
而仅供参考,您的语法错误:$('ul.children active')
应该是$('ul.children.active')
。