Question

我在html中有这个按钮

<tr><td>
    <button class="btn cmt_list" name="cmtList" id="cmt-'.$row['uid'].'"value = "hide/show"/>Show</button>
</td></tr>

点击后，我想显示/隐藏div。我希望div默认隐藏。

<div class='commentbox' id='comments-{$row['uid']}'></div>

截至目前，我的javascript看起来像这样

var toggle = function() {
    var mydiv = document.getElementById('newpost');
    if (mydiv.style.display === 'block' || mydiv.style.display === '')
        mydiv.style.display = 'none';
    else
        mydiv.style.display = 'block'
}

Answer 1

您无需编写自己的切换功能。您可以使用jQuery切换功能轻松完成。

这是HTML。设置display: none会使其默认隐藏。

<div id="myDiv" style="display: none">
    Hello this is my div
</div>
<button id="myBtn">Toggle Div</button>

这是jQuery。

$('#myBtn').click(function() {
    $('#myDiv').toggle();
});

工作演示：http://jsfiddle.net/eL2AU/

您也可以单独使用JavaScript，如下所示：

var btn = document.getElementById('myBtn');
btn.onclick = function() {
    var d = document.getElementById('myDiv');
    if (d.style.display === "none") {
        d.style.display = "block";   
    } else {
         d.style.display = "none";   
    }
};

演示：http://jsfiddle.net/eL2AU/1/

Answer 2

您将错误的ID传递给document.getElementById()。您的div的ID为comments-{$row['uid']}，但您正在查找ID为newpost的元素。

Answer 3

如果你的问题在点击之前隐藏了div，那么把它放在你的函数之前

$('#myDiv').hide();

用toggle（）隐藏div

3 个答案: