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

【问题标题】：Auto expand accordion on mouseover but prevent collapsing on mouseover鼠标悬停时自动展开手风琴，但防止鼠标悬停时折叠
【发布时间】：2016-04-23 08:43:24
【问题描述】：

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

以下是我的代码：

    $("#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));
    });

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

【问题讨论】：

标签： jquery-ui jquery-ui-accordion

【解决方案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'); }
        });
  });

代码是这样工作的：

如果光标位于非活动标题上，则该部分会在延迟后展开
如果光标位于活动标题上，则不执行任何操作
鼠标点击切换部分状态
如果手风琴正在播放动画，则鼠标点击静音

【讨论】：