Question

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

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

<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]中，远离滑块按钮的“mouseup”会导致手风琴打开;不希望的。

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

- ＆GT;滑块移动手风琴不打开 [PASS]

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

- ＆GT;滑块移动手风琴打开 [FAIL]

封闭的手风琴移动滑块按钮鼠标悬停在手风琴光标之外

- ＆GT;滑块移动手风琴不打开 [PASS]

因为它适用于Firefox，但不适用于Chrome（和IE），我认为这可能是一个jQuery / jQuery-ui错误，我已经学到了很多这方面的问题，我可能会遗漏一些明显的东西，我可以使用快速修复来解决这个问题吗？或者这是关于jQuery如何通过浏览器特性进行论述的问题。

Answer 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之前发生）需要超时。我把它设置为10ms，这应该是高负载CPU和非常快速点击用户之间的良好平衡。

嵌入在Accordion中的jQueryUI Slider在Chrome浏览器中失败了

1 个答案: