是否有一种与悬停相同的方法,除了鼠标而不是鼠标悬停它使用鼠标点击?用途是带有子菜单的垂直菜单。悬停使菜单太生涩和不稳定。 html和psuedo js代码在下面,它显示了我想要完成的任务。
<ul id="global-left-nav">
<li><span class="menu-header">Synthesizers</span>
<ul class="sub-cat">
<li><a href="#">Sub Cat 1</a></li>
<li><a href="#">Sub Cat 2</a></li>
<li><a href="#">Sub Cat 3</a></li>
</ul>
</li>
<li><span class="menu-header">Drum Machines</span>
<ul class="sub-cat">
<li><a href="#">Sub Cat 1</a></li>
<li><a href="#">Sub Cat 2</a></li>
<li><a href="#">Sub Cat 3</a></li>
</ul>
</li></ul>
$('.sub-cat').hide();
$('.menu-header').myTwoClickFunc(
//if clicked once
function() {
$(this).next('ul').slideDown();
$(this).next('ul').addClass('open');
$('ul.open').addClass('close');
},
//if clicked twice
function() {
$(this).next('ul').slideUp();
$(this).next('ul').addClass('close');
});
我认为切换可能有效,但它不会在2个回调函数之间交替。 感谢
答案 0 :(得分:0)
你可以这样做:
$('element').on('hover', function() { $(this).click() });
答案 1 :(得分:0)
您只需切换一个类并在点击处理程序中使用if语句:
$('.menu-header').on('click', function() {
var $this = $(this);
if ($this.hasClass('open')) {
// close it
}
else
{
// open it
}
$this.toggleClass('open')
})
你能提供一个悬停的例子,这样我们就可以看到“过于生涩和不稳定”的含义。无论动作是在click
还是hover
上运行,动画都是相同的 - 它只是一个触发它的不同事件。
答案 2 :(得分:0)
(function ($) {
$.fn.clickToggle = function (func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function () {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
$('.menu-header').clickToggle(
function () {
$(this).next('ul').slideDown();
$(this).next('ul').addClass('open');
$('ul.open').addClass('close');
},
function () {
$(this).next('ul').slideUp();
$(this).next('ul').addClass('close');
});
或
使用.one()
function second() {
$(this).next('ul').slideUp();
$(this).next('ul').addClass('close');
$('.menu-header').one('click',first);
}
function first() {
$(this).next('ul').slideDown();
$(this).next('ul').addClass('open');
$('ul.open').addClass('close');
$('.menu-header').one('click',second);
}
$('.menu-header').one('click',first);