我正在构建一个垂直 Accordion 导航,要求显示子导航链接并在悬停或单击 .accordionButton 时保持打开状态。
到目前为止,我已经能够让子 .accordionContent 在悬停时展开,但它不会保持打开状态。
我看到了这个页面:menu mouseenter mouseleave click ,这可能是一个好的开始,但我无法理解它的实现。
这是我的 fiddle 和标记:
HTML
<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>
JS
$(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');
});
});
最佳答案
类似于 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
。
关于jquery - 事件委托(delegate)支持悬停并单击 Accordion 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15280093/