嵌入 Accordion 的 jQueryUI 滑块在 Chrome 浏览器中失败答案

【问题标题】：jQueryUI Slider embedded in Accordion fails bugs in Chrome browser嵌入 Accordion 的 jQueryUI 滑块在 Chrome 浏览器中失败
【发布时间】：2014-07-18 16:24:18
【问题描述】：

我需要将滑块控件添加到手风琴标题。

我已经成功地使用手风琴和滑块的 jQuery UI 演示将两者很好地混合在一起。

jsfiddle page.

<div id="accordion">
  <div>
    <h3>Section 1</h3>
    <div class="slider" id="slider1"></div>
  </div>
  <div>
    <p>Mauris mauris ante</p>
  </div>
  <div>
    <h3>Section 2</h3>
    <div class="slider" id="slider2"></div>
  </div>
  <div>
    <p>Sed non urna.o.</p>
  </div>
  <div>
    <h3>Section 3</h3>
    <div class="slider" id="slider3">
  </div>
</div>
<div>
  <p>Nam enim risus.</p>
  <ul>
    <li>List item one</li>
    <li>List item two</li>
  </ul>
</div>

<script>
 $( "#accordion" ).accordion();
 $( ".slider" ).slider({
  range: true,
  min: 0,
  max: 7,
  values: [0, 7],
  step: 0.5,
  slide: function( event, ui ) {
    var id=$(this).attr('id');
    $( id).val( ui.values[0] + " - " + ui.values[1] );

    event.stopPropagation();
  }   }); $( ".slider").mouseup();

</script>

问题在于在未打开的手风琴上移动滑块。由于滑块控件大部分时间都沿幻灯片捕捉，因此用户“鼠标”远离滑块按钮。这在 Firefox [29.0.1] 中按计划工作，但在 Chrome [35.0] 中，远离滑块按钮的“鼠标上移”会导致手风琴打开；不受欢迎。

封闭式手风琴。移动滑块按钮。鼠标悬停在滑块按钮上。

-> 滑块移动手风琴不打开 [PASS]

封闭式手风琴。移动滑块按钮。 Mouseup 与滑块按钮的光标关闭，但仍然在滑块规则上。

-> 滑块移动手风琴打开 [FAIL]

封闭式手风琴移动滑块按钮鼠标悬停，手风琴外的光标关闭

-> 滑块移动手风琴不打开 [PASS]

因为它适用于 Firefox，但不适用于 Chrome（和 IE），有没有我可以用来解决这个问题的快速解决方案？或者这是 jQuery 如何克服浏览器特性的一个裂缝。

【问题讨论】：

标签： jquery jquery-ui google-chrome jquery-ui-slider jquery-ui-accordion

【解决方案1】：

您可以暂时禁用手风琴的不同选项卡的激活。然而，这种方法很粗糙，因为它需要一个计时器并且产生竞争条件的可能性很小。

首先，创建一个您的手风琴将评估的标志：

var tempDisable = false;

修改您的手风琴，使其在设置标志时不会激活其他选项卡：

$("#accordion").accordion({
    beforeActivate: function() {
        if (tempDisable) {
            return false;
        }
    }
});

最后，在开始/停止拖动滑块时，设置/取消设置标志：

    [...]
    start: function() {
        tempDisable = true;
    },
    stop: function() {
        setTimeout(function() {
            tempDisable = false;
        }, 10);
    }
    [...]

我已经用完整的工作代码更新了your JSFiddle。如上所述，这并不理想，因为（因为滑块的stop 事件将在面板的beforeActivate 之前发生）需要超时。我将它设置为 10 毫秒，这应该是高负载 CPU 和快速点击用户之间的良好平衡。

【讨论】：