这真的很奇怪。其他任何东西(按钮、下拉列表等)都适用于此方法，但不适用于复选框。在我的代码中，出现了一个按钮，当我按下它时，复选框变得可见。但是当我再次按下它时，复选框并没有消失。我发现如果我删除一行，代码似乎可以工作(但文本不是我需要的 float:left)。我怎样才能解决这个问题，使我的格式保持正确？这是需要删除的行:
input[type=checkbox] {margin: 5px; float:left; }
这是我的全部代码:
<!DOCTYPE html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style type="text/css">
hidden0001{display:none}
</style>
<style>
</style>
<style id="Styles">
label { margin: 1px; padding: 0px; float:right;}
html { margin: 0px; padding: 0px; }
body {margin: 0px; padding: 0px;}
p.left { text-align: left; margin: 0px;}
.image {margin: 5px;}
.headertext {margin: 5px; margin-left: 5px; margin-right: 5px; }
.draggable { width: auto; height: auto; position: absolute;}
input[type=text] {margin: 5px;}
input[type=button] {margin: 5px;}
input[type=checkbox] {margin: 5px; float:left; }
input[type=file] {margin: 0px;}
span {margin: 5px;}
textarea {margin: 5px;}
select {margin: 5px;}
.tablink {float:left; margin: 5px;}
.ui-tabs {height:40px; vertical-align: central; margin: 2px;}
.mainheader {margin: 5px;vertical-align: central; padding: 0px; }
#TabBox {background-color:#fff;padding: 0px;}
.check { clear: both; float: left; display: block; }
.ui-tooltip {z-index:10;font-size:0.875em;margin-left:5px;
color:#fff;background-color: #000000;font-family: 'Droid Sans', sans-serif;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; position: absolute;padding: 5px;
border:2px solid blue;}
.tab_box {width:800px; height:400px; position: relative; }
</style>
</head>
<body style="cursor: auto; ">
<div style="width:100%;height:auto;">
<center>
<div class="maincontainer" style="display: block; ">
<div id="Builder" style="display: block; opacity: 1; ">
<div id="Main">
<div class="mainheader changeheader" style="width: 800px; ">
</div>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="width: 800px; display: none; ">
<div id="tablinks">
</div>
</div>
<div id="TabBox" style="width: 800px; ">
<div class="Elements-0 tab_box" id="containment-wrapper-0" style="display: block; ">
<div id="draggable_1" class="draggable ui-widget-content ui-draggable" style="left: 30px; top: 60px; ">
<input type="button" value="PUSH THIS BUTTON" class="btn " onclick="ubot.runScript('runthis()')">
</div>
<div id="draggable_2" class="draggable ui-widget-content ui-draggable" style="left: 242px; top: 64px; ">
<hidden0001>
<input type="checkbox" id="CheckBox_2" variable="#chbox" fillwith="checked">
<label for="CheckBox_2" style="padding-top:1px;">This is a checkbox</label>
</hidden0001>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
<!--SCRIPTS-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js">
</script>
<script>
//Get current tab ID / Switch Tabs
$(".tablink").live("click", function() {
currentTabID = $(this).attr('id');
$(".tablink").css("border-bottom", "2px inset #000");
$(".tab" + currentTabID).css("border-bottom", "");
$(".tab_box").hide();
$("#containment-wrapper-" + currentTabID).show();
drag();
});
$(function () {
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(document).tooltip();
});
</script>
<script>
$(document).ready(function(){
$("#draggable_1").click(function(){
$("hidden0001").toggle();
});
});
</script>
</body>
</html>
谢谢你们的帮助，我真的很感谢你们的工作，伙计们! 一切顺利， 琼斯
最佳答案
我认为您在制作自己的标签时遇到了问题，复选框在哪里。
<hidden0001>....</hidden0001>
只需将此更改为已知标签，如 <span>使用该类名:
<span class="hidden0001"> .... </span>
在你的代码中:
/*CSS*/
.hidden0001{display:none}
/*Jquery*/
$(document).ready(function(){
$("#draggable_1").click(function(){
$(".hidden0001").toggle();
});
});
关于javascript - 按下按钮时隐藏的复选框出现(正确)，但再次按下时不会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20384728/