隐藏 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>
我无法使用 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>