jquery div显示/隐藏在检查或取消选中时无法正常运行

时间:2013-05-25 05:33:44

标签: javascript jquery ajax

在我的网页中,有一个字段以前是正确的,并且具有某些元素。因此,如果您检查以前的手术,那么只有之前的手术元素显示其他情况。 以下是我的代码的一部分,但它无法正常运行。可以任何一个请告诉我

<!DOCTYPE html>
<html>
<head>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>



  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
$(function(){
   $('.toggler').click(function(){
       if (this.checked) {
           $('div#name').slideDown();
       } else {
           $('div#name').slideUp();
       }
   });
})
  </script>
</head>
<body>
<table>
<tr>

                    <td  height="30">
                        <b>Previous Surgery</b>
                    </td>

                    <td>
<input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
                    </td>
                </tr>
<div id="name">

<tr><td>Type of Surgery</td><td><input type="text"></td></tr>
<tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>

<tr><td>Year</td><td><input type="text"></td></tr>
<tr><td>Reffered By</td><td><input type="text"></td></tr>
</div>

</table>
</body>
</html>

4 个答案:

答案 0 :(得分:2)

原因是您的HTML无效。 Div不能成为table的直接孩子。

修复您的HTML: -

<table>
    <tr>
        <td height="30"> <b>Previous Surgery</b>

        </td>
        <td>
            <input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
        </td>
    </tr>
</table>
<div id="name">
    <table>
        <tr>
            <td>Type of Surgery</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Main Reason for surgery</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Year</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Reffered By</td>
            <td>
                <input type="text">
            </td>
        </tr>
    </table>
</div>

JS

$(function () {
    $('.toggler').click(function () {
        $('#name').slideToggle();
    });
})

Fiddle

如果您的元素具有id,则单独使用它,因为它应该是唯一的并且在性能上的成本效益较低。

来自Doc

  

对于id选择器,jQuery使用JavaScript函数document.getElementById(),这非常有效。当另一个选择器附加到id选择器时,例如h2#pageTitle,jQuery在将元素标识为匹配之前执行额外的检查。

因此#name优于div#name

感谢@Ian

答案 1 :(得分:0)

只需尝试这样

$(function(){
$('.toggler').click(function(){
   $('div#name').toggle();       
 });
})

试试这个FIDDLE

并尝试将你的div放在桌子之外,正如我在小提琴中提到的那样

答案 2 :(得分:0)

Working FIDDLE Demo

<div id="name">之间不能有tr。在div之前关闭您的桌子,然后重新打开它:

<table>
    <tr>
        <td height="30">
            <b>Previous Surgery</b>
        </td>
        <td>
            <input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
        </td>
    </tr>
</table>


<div id="name">
    <table>
        <tr><td>Type of Surgery</td><td><input type="text"></td></tr>
        <tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>
        <tr><td>Year</td><td><input type="text"></td></tr>
        <tr><td>Reffered By</td><td><input type="text"></td></tr>
    </table>
</div>

答案 3 :(得分:0)

你的div元素放置是错误的。将div放在适当的位置然后SlideUp和SlideDown方法应该可以工作。