Question

我在表单中有这个代码。但是，当我先点击＆＃34;显示以下部分＆＃34;时，它会快速显示＆＃34; multmachines＆＃34; div然后再次出现相同的按钮，div消失。我不知道它为什么不起作用（如果我把按钮放在表格之外但不在里面，它可以正常工作）。请帮忙!!

<form name="input" action="" method="POST">
 <button class="close" id="hidemultmachines" onclick="$('#multmachines').hide();   $(this).hide();$('#showmultmachines').show();">Hide section below <img alt="Close" width="35" height="35" src="../images/close.png"> </button>
 <button class="close" id="showmultmachines" onclick="$('#multmachines').show();   $(this).hide();$('#hidemultmachines').show();"><img alt="Show" width="35" height="35" src="../images/arrow-down.png">Show section below</button>
 <div class="jumbotron" id="multmachines">
     <div class="divtable">
         <table id="hosts" class="table table-striped">
             <tr>
                 <th width="28%"><strong>Prefix</strong></th>
                 <th width="17%"><strong>Type</strong></th>
                 <th width="27%"><strong>Group</strong></th>
                 <th width="60%"><strong>Number of Machines</strong></th>
             </tr>
             <tr>
                 <td><input type="text" name="prefix" class="a1" size="16"></td>
                 <td><select name="machinestype" class="a1">
                     {html_options values=$types output=$types}
                     </select>
                 </td>
                 <td><select name="machinesrange" id=machinesrange class="a1">
                     {html_options values=$ranges output=$ranges}
                     </select>
                 </td>
                 <td><input type="text" name="machinesnumber" id=machinesnumber class="a1" size="32">
                 </td>
             </tr>
         </table>
     </div>
 </div> 
</form>

我确切地说我在标题中有这个代码，所以它不是因为：

$(document).ready(function(){
   $('#hidemultmachines').hide();
   $('#multmachines').hide();
  });

问题更新

Answer 1

div隐藏，因为你在jQuery加载时每次都隐藏只有当你单击button.try来删除onClick事件并在jQuery中这样做时才会这样做

<script>
$(document).ready(function(){
  $("#hidemultmachines").click(function(){
$('#multmachines').hide();
  });
  $("#showmultmachines").click(function(){
    $("#multmachines").show();
  });
});
</script>

你可以添加这个cript，你可以轻松隐藏并显示你的div点击按钮... 并且还指的是w3schools for jquery hide and show button..thanks ...

Answer 2

创建主div并放置两个按钮并在里面给出你的表内容和multmachines div 内部表格不起作用请尝试以下方法：

  <!DOCTYPE HTML>
    <html>
    <head>
    <title>Sample For Animation</title>


      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>$(document).ready(function(){
       $('#showmultmachines').hide();
       $('#multmachines').hide();
      }</script>
    <body>
     <div class="jumbotron" id="multmachinescon">
     <button class="close" id="hidemultmachines" onclick="$('#multmachines').hide();   $(this).hide();$('#showmultmachines').show();">Hide section below <img alt="Close" width="35" height="35" src="../images/close.png"> </button>
     <button class="close" id="showmultmachines" onclick="$('#multmachines').show();   $(this).hide();$('#hidemultmachines').show();"><img alt="Show" width="35" height="35" src="../images/arrow-down.png">Show section below</button>
     <div class="jumbotron" id="multmachines">
     <div class="divtable">
     <table id="hosts" class="table table-striped">
     <tr>
     <th width="28%"><strong>Prefix</strong></th>
     <th width="17%"><strong>Type</strong></th>
     <th width="27%"><strong>Group</strong></th>
     <th width="60%"><strong>Number of Machines</strong></th>
     </tr>
     <tr>
     <td><input type="text" name="prefix" class="a1" size="16"></td>
     <td><select name="machinestype" class="a1">
      {html_options values=$types output=$types}
     </select>
     </td>
     <td><select name="machinesrange" id=machinesrange class="a1">
      {html_options values=$ranges output=$ranges}
     </select>
     </td>
     <td><input type="text" name="machinesnumber" id=machinesnumber class="a1" size="32">
     </td>
     </tr>
     </table>
     </div>
     </div></div> </body>
    </html>

Answer 3

在JSFiddle

尝试此代码

<button class="close" id="hidemultmachines">Hide section below 
<img alt="Close" width="35" height="35" src="../images/close.png"> </button>
<button class="close" id="showmultmachines">
<img alt="Show" width="35" height="35" src="../images/arrow-down.png">Show section below</button>
<div class="jumbotron" id="multmachines">
 <div class="divtable">
     <table id="hosts" class="table table-striped">
         <tr>
             <th width="28%"><strong>Prefix</strong></th>
             <th width="17%"><strong>Type</strong></th>
             <th width="27%"><strong>Group</strong></th>
             <th width="60%"><strong>Number of Machines</strong></th>
         </tr>
         <tr>
             <td><input type="text" name="prefix" class="a1" size="16"></td>
             <td><select name="machinestype" class="a1">
                 {html_options values=$types output=$types}
                 </select>
             </td>
             <td><select name="machinesrange" id=machinesrange class="a1">
                 {html_options values=$ranges output=$ranges}
                 </select>
             </td>
             <td><input type="text" name="machinesnumber" id=machinesnumber class="a1" size="32">
             </td>
         </tr>
     </table>
 </div>

<script type="text/javascript">
$(document).ready(function(){
    $('#multmachines').hide();
    $('#hidemultmachines').hide();
  $("#hidemultmachines").click(function(){
    $('#multmachines').hide();
    $('#showmultmachines').show();
    $('#hidemultmachines').hide();
});
$("#showmultmachines").click(function(){
    $("#multmachines").show();
    $('#showmultmachines').hide();
    $('#hidemultmachines').show();
});

}）;

以下是Fiddle link

希望对你有用。：）

在jQuery中隐藏/显示div和按钮

3 个答案: