jQuery UI最初隐藏滑块句柄

Question

我已经用jquery ui设置了一个滑块。我希望滑块的手柄最初被隐藏，仅在用户单击滑块后才显示。我设法通过在ui-slider-handle类中将display设置为none来隐藏该句柄。但是，我稍后无法将其更改。

Answer 1

基于https://api.jqueryui.com/slider/示例，请考虑以下代码段。

$(function() {
  $("#slider").slider({
    start: function() {
      $(".ui-slider-handle", this).show();
    }
  });
  var sw = $("#slider").slider("widget");
  $(".ui-slider-handle", sw).hide();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

是的，您可以使用CSS隐藏该句柄，使其再次出现仅意味着以一种元素样式使用CSS：

$(".ui-slider-handle").css("display", "block");

上面的示例更加具体，但本质上是相同的。一旦初始化了Slider，就可以调用widget方法来访问各个元素。我们可以使用.hide()手柄。当用户单击滑块时，这会触发start事件，我们当时可以.show()句柄。

查看更多：

• https://api.jqueryui.com/slider/#method-widget
• https://api.jqueryui.com/slider/#event-start
• https://api.jquery.com/show/
• https://api.jquery.com/hide/