0

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

4

3 回答 3

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);
于 2013-09-18T16:09:30.570 回答
0

你可以这样做：

$('element').on('hover', function() { $(this).click() });
于 2013-09-18T16:06:00.537 回答
0

您可以切换一个类并在单击处理程序中使用 if 语句：

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

  $this.toggleClass('open')

})

您能否提供一个悬停示例，以便我们了解您所说的“过于生涩和不稳定”是什么意思。无论动作是否发生click或hover运行动画的内容是相同的 - 它只是触发它的不同事件。

于 2013-09-18T16:08:28.740 回答