是否有与悬停相同的jQuery方法，只是使用鼠标单击代替

Is there a jQuery method identical to hover except uses mouse clicks instead?

本文关键字：鼠标 单击 方法 悬停 jQuery 是否      更新时间：2023-09-26

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

你可以

这样做：

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

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

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

能否提供悬停的示例，以便我们了解您所说的"太生涩和不稳定"的含义。 无论动作发生在click还是hover运行动画的内容都是相同的 - 触发它的只是不同的事件。

(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);
相关文章：