在鼠标悬停时自动展开手风琴，但防止在鼠标悬停时折叠

Question

我可以让我的手风琴在悬停时自动打开一个部分，但我不知道如何防止它在将鼠标光标移动到手风琴的活动 header 上时折叠一个部分。

以下是我的代码：

    $("#accordion").accordion({
      event: 'mousedelay'
    }).delegate('.ui-accordion-header', 'mouseover', function() {
      clearTimeout($(this).closest('.ui-accordion').data('timeout'));
      $(this).closest('.ui-accordion').data('timeout', setTimeout($.proxy(function() {
        $(this).trigger('mousedelay');
      }, this), 500));
    });

如何更改代码，使活动部分仅在单击（而不是鼠标悬停）时折叠？

Answer 1

经过一些摆弄（这是我第一次尝试jquery-ui），我解决了我自己的问题：

$(document).ready(function() {
    $( "#accordion" ).accordion( { 
      collapsible: true,
      active: false,
      icons: null,
      animate: 500
    });
    $('#accordion').accordion({
      event: 'mousedelay'
    });
    $('.ui-accordion-header')
      .on('mouseover', function() {
        clearTimeout($(this).closest('.ui-accordion').data('timeout'));
        if (!$(this).hasClass('ui-state-active')) {
          $(this).closest('.ui-accordion').data('timeout', setTimeout($.proxy(function() {
            $(this).trigger('mousedelay');
          }, this), 500));
         };
        })
      .on('mouseleave', function() {
        clearTimeout($(this).closest('.ui-accordion').data('timeout'));
        })
      .on('click', function() {
        clearTimeout($(this).closest('.ui-accordion').data('timeout'));
        if (!$(this).next('div').is(':animated')) { $(this).trigger('mousedelay'); }
        });
  });

代码是这样工作的：

如果光标在不活动的 header 上，该部分会在延迟后展开
如果光标位于活动 header 上，则什么都不做
鼠标点击切换一个部分的状态
如果手风琴正在动画，则鼠标点击静音

在鼠标悬停时自动展开手风琴，但防止在鼠标悬停时折叠

Auto expand accordion on mouseover but prevent collapsing on mouseover

jquery-ui

jquery-ui-accordion