隐藏 jquery 移动滑块

hide jquery mobile slider

我无法使用 jquery 移动设备隐藏以下滑块,这是我的代码 谁能帮忙

javascript代码:

$(document).ready(function($) {
$("#d_c").hide(); 
}

html代码:

<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>

为了隐藏看起来像 Flipswitch 的漂亮 label 后面的本机 select 元素,JQM 使用绝对定位,所以你在这里运气不好只是因为你是隐藏了错误的元素。

请说,仅隐藏 Flipswitch 并保持相应的标题可见有点不寻常,但无论如何,由您决定。这里的解决方案是设置一个包装器容器并使用标准的 JQM class ui-screen-hidden 来完成工作。您可以为此使用一个简单的标准命名约定,并将后缀 -container 附加到所有包装器。这是一个例子:

function toggleFlipswitch() {
  $("#d_c-container").toggleClass("ui-screen-hidden");
}

$(document).on("pagecreate", "#page-one", function() {
  $("#d_c-container").addClass("ui-screen-hidden");
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-theme="a" data-role="header" data-position="fixed">
      <a href="#" onclick="toggleFlipswitch()" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-grid">Show/Hide Flipswitch</a>
      <span class="ui-title"></span>
    </div>
    <div data-role="content">
      <div id="d_c-container">
        <label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
        <select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
          <option value="off">No</option>
          <option value="on">Yes</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>