切换 DIV 隐藏和显示答案

【问题标题】：Toggle DIV hide and show切换 DIV 隐藏和显示
【发布时间】：2013-04-25 18:42:56
【问题描述】：

我试图在按下按钮“commentDIV”时切换 DIV（隐藏和显示）..但它不是工作至今...我的 HTML 代码如下。我在这里尝试做的是仅隐藏/显示 DIV 块，仅按下其按钮..我不知道如何将按钮绑定到 DIV..我的代码能够隐藏 DIV 不再显示.. .而且我认为它只适用于第一个commentDIV而不适用于其他人......

<html>
    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('.commentDIV').hide();
        $('.commentButton').click(function () {
                        $(this).next('.commentDIV').show();
                    });
        $('.closeButton').click(function () {
                        $(this).next('.commentDIV').hide();
                    });
        });


    </script>
    </head>
<body>
                    <div id="abc" style="border:2px dashed;width:600px;background:white;">
                        <table border="2px">
                            <tr>
                                <td style="text-align:center;">
                                    <div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;">
                                    100 %<br>Success</div>
                                    <span style="color: green">&#10004;&nbsp;Tested</span>
                                    <span>24/4/2013</span>
                                </td>
                                <td>
                                    <span id="couponTitle" >FLAT 25% OFF ON ALL MITASHI TABLETS</span><br>

                                    <span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white">GCKSPNHIAC18</span>
                                    <br>
                                    <span style="font-size:10pt;">Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</span>
                                </td>
                                <td style="text-align:center;width:100px">
                                    <span style="font-size:10pt;">Did this coupon work for you?</span>
                                    <br>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:5px;background:#39C46E;color:white;width:50px;">Yes</button>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;">No</button>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align:right;">
                            <button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
                            <button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close comments</button>
                            <div class="commentDIV" style="height:300px;overflow-x:hidden;">
                                <table border=".1em">
                                    <tr>
                                        <td style="text-align:center;width:100px;height:100px;border-radius:5px;-moz-border-radius:5px;background: url(avatar.jpg) no-repeat center"></td>
                                        <td style="width:600px;">
                                            <div style="text-align:left;border-radius:5px;-moz-border-radius:5px;width:100%;overflow: auto;">Nice coupons
                                            </div>
                                        </td>
                                    </tr>
                                </table>

                                </div>
                            </td>
                        </tr>

                        </table>
                    </div>
                    <div id="abc" style="border:2px dashed;width:600px;background:white;">
                        <table border="2px">
                            <tr>
                                <td style="text-align:center;">
                                    <div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;">
                                    100 %<br>Success</div>
                                    <span style="color: green">&#10004;&nbsp;Tested</span>
                                    <span>24/4/2013</span>
                                </td>
                                <td>
                                    <span id="couponTitle" >FLAT 25% OFF ON ALL MITASHI TABLETS</span><br>

                                    <span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white">GCKSPNHIAC18</span>
                                    <br>
                                    <span style="font-size:10pt;">Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</span>
                                </td>
                                <td style="text-align:center;width:100px">
                                    <span style="font-size:10pt;">Did this coupon work for you?</span>
                                    <br>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39C46E;color:white;width:50px;">Yes</button>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;">No</button>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align:right;">
                            <button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
                            <div class="commentDIV">
                                <div>Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</div>
                                </div>
                            </td>
                        </tr>

                        </table>
                    </div><div id="abc" style="border:2px dashed;width:600px;background:white;">
                        <table border="2px">
                            <tr>
                                <td style="text-align:center;">
                                    <div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;">
                                    100 %<br>Success</div>
                                    <span style="color: green">&#10004;&nbsp;Tested</span>
                                    <span>24/4/2013</span>
                                </td>
                                <td>
                                    <span id="couponTitle" >FLAT 25% OFF ON ALL MITASHI TABLETS</span><br>

                                    <span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white">GCKSPNHIAC18</span>
                                    <br>
                                    <span style="font-size:10pt;">Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</span>
                                </td>
                                <td style="text-align:center;width:100px">
                                    <span style="font-size:10pt;">Did this coupon work for you?</span>
                                    <br>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39C46E;color:white;width:50px;">Yes</button>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;">No</button>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align:right;">
                            <button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
                            <div class="commentDIV">
                                <div>Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</div>
                                </div>
                            </td>
                        </tr>

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

更新：添加了一个小提琴here

我已更新代码以添加另一个用于关闭commentDIV 的按钮

Javascript 是：

$(document).ready(function () {
        $('.commentDIV').hide();
        $('.commentButton').click(function () {
                        $(this).next('.commentDIV').show();
                    });
        $('.closeButton').click(function () {
                        $(this).next('.commentDIV').hide();
                    });
        });

新按钮是：

<button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close comments</button>

但它为什么不起作用？？

【问题讨论】：

尝试使用.toggle() 而不是.hide()/.show() 应该对您有所帮助！ :)
.toggle()
您的文档中不能有多个 ID。 ID 必须唯一，使用 CLASS

标签： javascript jquery html css

【解决方案1】：

您需要进行一些更改，而不是使用 id 使用类属性，因为 id 在文档中应该是唯一的

$(document).ready(function() {
    $(document).on('click', '.commentButton', function() {
        $(this).next('.commentDIV').toggle()
        alert("xscs");
    });
});

演示：Fiddle

【讨论】：

【解决方案2】：

您目前正在使用 commentButton 作为 id 重复多次..当您想要使用 ID 调用时，它应该只访问页面一次。如果你想多次使用它应该被声明为类..所以尝试使用类

【讨论】：

【解决方案3】：

试试这个：

$(document).ready(function () {
    $('.commentButton').click(function () {
        $(this).next('.commentDIV').toggle();
    });
});

使用toggle() - 显示或隐藏匹配的元素。
使用next() - 获取commentButton 的紧随其后的兄弟。

【讨论】：

实际上切换只对第一个 DIV 起作用。怎么只能切换当前的DIV....
好的，首先将所有id="commentButton" 替换为class="commentButton" 并将id="commentDIV" 替换为class="commentDIV"，然后尝试我更新的代码。
没有任何效果我也试过这个。jQuery(document).ready(function(){ jQuery('.commentDIV').hide(); jQuery('.commentButton').live('click', function(event) { $(this).next('.commentDIV').show(); }); jQuery('.closeButton').live('click', function(event) { $(this).next('.commentDIV').hide(); }); });
看这个：$('.commentDIV').hide(); $('.commentButton').click(function () { $(this).siblings('.commentDIV').show(); }); $('.closeButton').click(function () { $(this).siblings('.commentDIV').hide(); });

【解决方案4】：

您调用hide() 而不是toggle()。隐藏只会隐藏元素。 toggle 会在隐藏时显示，在显示时隐藏。

这个语法$('#commentDIV')负责查找id为commentDIV的元素。 id 元素在 HTML 中应该是唯一的，所以 jquery 假定它只有一个。

【讨论】：

【解决方案5】：

jQuery 附带了另一种完全满足您需要的方法：.toggle()

但是，您的 HTML 多次使用相同的 ID“commentDIV”。考虑将它们转换为类，或者我们使用另一个选择器来选择要切换的一个 div。

【讨论】：

【解决方案6】：

id 属性为 HTML 元素指定一个唯一的 id（该值在 HTML 文档中必须是唯一的）。

所以把 id="commentDIV" 改成 class="commentDIV" 试试看。

代码：

$('.commentButton').click(function() {
    var commentDiv = $(this).closest('tr').find('.commentDIV');

    if (commentDiv.is(":visible")) {
        commentDiv.hide();
    } else {
        commentDiv.show();
    }
    alert("xscs");
});

http://jsfiddle.net/KesY6/1/

【讨论】：

是的，你是对的，有什么方法可以找出要切换的 DIV..

【解决方案7】：

这是对你的小提琴的一个编辑，它展示了其他人所说的答案：

http://jsfiddle.net/h4G6N/1/

以下是更新后的 HTML 示例：

<button type="button" id="commentButton" class="comment-button" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
    <div id="commentDIV" class="comment-block">
        Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.
    </div>
</button>

这是 JS：

$(function() {
    $('.comment-button').click(function() {
        $(this).next(".comment-block").toggle();
        alert("xscs");    
    });
});

本质上：您需要使用类选择器而不是 ID 选择器，因为您的 ID 不是唯一的（这是另一个问题）。

【讨论】：

【解决方案8】：

演示::

http://jsfiddle.net/Praveen16oct90/KesY6/

使用此编码并尝试它的工作原理

  $(document).ready(function() {


        $('#commentButton').click(function() {

    $('#commentDIV').toggle();

    });
});

【讨论】：

【解决方案9】：

jQuery deprecated toggle() 方法。最好改用.toggleClass()。

.show{
   display: block;
}
.hide{
    display:none;
}
    $("#commentButton").click(function(){
        $("#commentDIV").toggleClass("show hide");
    });

【讨论】：