2016-01-18 50 views
0

我可以让手风琴自动打开悬停部分,但我不知道如何在将鼠标光标移动到活动首部时防止其折叠部分的手风琴。在鼠标悬停时自动展开手风琴但防止鼠标悬停时折叠

下面是我的代码:

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

如何更改代码,以便活动部分将仅在点击后崩溃(不鼠标悬停)?

回答

0

一些摆弄后(这是我第一次尝试的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'); } 
     }); 
    }); 

的代码是这样的:

  • 如果光标在一个非活动标题,该部分在延迟后展开
  • 如果光标位于活动标题上,则不进行任何操作
  • 鼠标单击切换部分的状态
  • 静音鼠标点击,如果手风琴正在动画