Question

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

以下是我的代码：

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

代码的工作原理如下：

如果光标位于非活动标头上，则该部分会在延迟
如果光标位于活动标题上，则不执行任何操作
鼠标单击可切换部分的状态
如果手风琴正在制作动画，则单击鼠标静音

鼠标悬停时自动扩展手风琴，但防止鼠标悬停时崩溃

1 个答案: