Question

是否有一种与悬停相同的方法，除了鼠标而不是鼠标悬停它使用鼠标点击？用途是带有子菜单的垂直菜单。悬停使菜单太生涩和不稳定。 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个回调函数之间交替。感谢

Answer 1

你可以这样做：

$('element').on('hover', function() { $(this).click() });

Answer 2

您只需切换一个类并在点击处理程序中使用if语句：

$('.menu-header').on('click', function() {
  var $this = $(this);
  if ($this.hasClass('open')) {
    // close it
  }
  else
  {
    // open it
  }

  $this.toggleClass('open')

})

你能提供一个悬停的例子，这样我们就可以看到“过于生涩和不稳定”的含义。无论动作是在click还是hover上运行，动画都是相同的 - 它只是一个触发它的不同事件。

Answer 3

(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);

除了使用鼠标点击之外，是否存在与悬停相同的jQuery方法？

3 个答案: