Question

我需要在JavaScript中显示和隐藏div。我正在使用更多a链接。当用户点击链接时，将显示容器下拉列表，当用户点击相同的更多链接时，应再次隐藏div。最初，div的显示设置为无。

的JavaScript ：

function show(get){
                if(document.getElementById(get).style.display="none")
                {
                    document.getElementById(get).style.display="";
                }
                else{
                    document.getElementById(get).style.display="none";
                }
            }

的 HTML ：

<div id="moreOffice">
 <a href="#" onclick="show('showOffice');">More</a>
<div id="showOffice" style="display:none;">
     hai the drop box is here.
 </div></div>

问题是，当我点击更多链接时，功能触发show()并显示div，但当我再次点击时，div并未隐藏。

Answer 1

您缺少正在使用的==运算符=。它必须像这样.......

function show(get){
            if(document.getElementById(get).style.display=="none")
            {
                document.getElementById(get).style.display="";
            }
            else{
                document.getElementById(get).style.display="none";
            }
        }

Answer 2

每次if语句执行并将evalutating为'true'然后将'display'设置为''时，您将'display'指定为'none'。只是你的js中的语法错误。

if(document.getElementById(get).style.display="none")

请改用：

function show(get){ 
       if(document.getElementById(get).style.display == "none") 
       { 
            document.getElementById(get).style.display = ""; 
       } 
       else{ 
            document.getElementById(get).style.display = "none"; 
       } 
 }

Answer 3

使用jquery切换功能隐藏和显示div

http://api.jquery.com/toggle-event/

<script>
 $(document).ready(function(){
     $("#more").click(function(){
     $("#showOffice").toggle();
    });
  });
 </script>

 <div id="moreOffice">
 <a href="#" id="more"">More</a>
 <div id="showOffice" style="display:none;">
 hai the drop box is here.
</div></div>

Answer 4

如果您可以使用jQuery，那么这样做是因为您需要做的就是以下内容;

$(".DIVNAME").toggle();

或单击元素; \

$(".CLICKEDELEMENT").click(function(){
$(".DIVNAME").toggle();
});

Answer 5

尝试

<强>的JavaScript

function show(get) {
    if (!document.getElementById) {
        return false;
    }
    var divID = document.getElementById(get);

    if (divID) {
        if (divID.style.display == "none") {
            divID.style.display = "inline";
            divID.style.visibility = "visible";
        } else if (divID.style.display == "" || divID.style.display == "inline") {
            divID.style.display     = "none";
            divID.style.visibility  = "hidden";         
        }
    } else {
        return false;
    }
}

的 HTML

<div id="moreOffice"> <a href="#" onclick="show('showOffice'); return false">More</a> <div id="showOffice" style="display:none;"> hai the drop box is here. </div> </div>

在JavaScript中下载容器

5 个答案: