我正在构建垂直手风琴导航,要求显示子导航链接,并在悬停或点击.accordionButton时保持打开状态。
到目前为止,我已经能够让孩子.accordionContent在悬停时扩展,但它不会保持打开状态。
我看到了这个SO页面:menu mouseenter mouseleave click,这可能是一个良好的开端,但不能完全围绕着这一点。
这是我的小提琴和标记:
<ul id="mainNav">
<li><a class="accordionButton" href="javascript:void(0);">head link 1</a>
<ul class="accordionContent">
<li>
<a href="javascript:void(0);">sub link 1</a>
</li>
<li>
<a href="javascript:void(0);">sub link 2</a>
</li>
</ul>
</li>
<li><a class="accordionButton" href="javascript:void(0);">head link 2</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 3</a>
<ul class="accordionContent">
<li>
<a href="javascript:void(0);">sub link 1</a>
</li>
<li>
<a href="javascript:void(0);">sub link 2</a>
</li>
</ul>
</li>
<li><a class="accordionButton" href="javascript:void(0);">head link 4</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 5</a></li>
<li><a class="accordionButton" href="javascript:void(0);">head link 6</a></li>
</ul>
$(document).ready(function () {
$('.accordionContent').hide();
$('.accordionButton').mouseenter(function () {
$(this).next('.accordionContent').stop().slideToggle("normal");
}, function () {
$(this).addClass("hover");
$(this).next('.accordionContent').stop().slideToggle('fast');
}).mouseleave(function () {
$(this).next('.accordionContent').stop().slideToggle("normal");
}, function () {
$(this).removeClass("hover");
$(this).next('.accordionContent').stop().slideToggle('fast');
});
});
答案 0 :(得分:2)
类似于this fiddle?
$(function () {
var $accContents = $('.accordionContent'),
$accButtons = $('.accordionButton');
$accContents.hide();
$accButtons.on('mouseenter click', function() {
var $thisContent = $(this).parent().find('.accordionContent');
if($thisContent.length) {
$accContents.not($thisContent).slideUp('fast');
$thisContent.slideToggle('fast');
}
});
});
如果不需要切换(这会使点击过时),请使用.slideDown('fast')
代替slideToggle
。