Question

这真的很奇怪。其他任何内容（按钮，下拉列表等）都适用于此方法，但不适用于复选框。在我的代码中，会出现一个按钮，当我按下它时，该复选框变为可见。但是当我再次按下它时，复选框不会消失。我想出如果我删除一行，代码似乎工作（但文本不浮动：左，我需要）。我怎么能解决这个问题，以便我的格式保持正确？这是需要删除的行：

     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>

感谢您的帮助，我非常感谢您的工作，伙计们！祝一切顺利，琼斯

Answer 1

我认为您在制作自己的标签时遇到问题。\ n \ n复选框。

<hidden0001>....</hidden0001>

只需使用该类名更改<span>等已知标记：

<span class="hidden0001"> .... </span>

在您的代码中：

/*CSS*/
.hidden0001{display:none}
/*Jquery*/
$(document).ready(function(){
 $("#draggable_1").click(function(){
   $(".hidden0001").toggle();
 });
});

演示 http://jsfiddle.net/BVmUL/181/

按下按钮时出现（正确）隐藏复选框，但再次按下时不会消失

1 个答案: