JavaScript显示/隐藏

Question

我正在使用此基本代码隐藏一个文本块并显示另一个文本块，并且效果很好，但是要再次单击关闭文本，我需要怎么做？ 现在，它保持打开状态，直到选择了其他选项，一个或另一个始终处于打开状态。 我添加了一些有效的关闭链接，但希望单击标题（或其他任何内容）以再次将其关闭。 其他类似的问题似乎要么使用jQuery，要么在选择链接后将其隐藏。

 function showhide(id) { if (document.getElementById) { var divid = document.getElementById(id); var divs = document.getElementsByClassName('hide'); for (var i = 0; i < divs.length; i++) { divs[i].style.display = 'none'; } divid.style.display = 'block'; } return false; } 

 <a onclick="showhide('toggle1');"> <h4>-> Title 1</h4> </a> <div class="hide" id="toggle1" style="display:none"> Some text here. <a onclick="showhide('verify');">close</a> </div> <a onclick="showhide('toggle2');"> <h4>-> Title 2</h4> </a> <div class="hide" id="toggle2" style="display:none"> Other text here. <a onclick="showhide('verify');">close</a> </div> 

Answer 1

下面的代码将检查与单击的链接关联的元素是否已经可见，如果是，则将其与其他元素一起隐藏。 无需任何紧密链接。

另外，正如@KScandrett所指出的，鉴于所有浏览器都支持浏览器是否支持document.getElementById ，因此检查浏览器是否支持它是多余的，因此我没有将其传递给这个答案。

 function showhide(id) { var divid = document.getElementById(id); var divs = document.getElementsByClassName('hide'); var showElement = true; if (divid.style.display === 'block') { showElement = false; } for (var i = 0; i < divs.length; i++) { divs[i].style.display = 'none'; } if (showElement) { divid.style.display = 'block'; } return false; } 

 <a onclick="showhide('toggle1');"> <h4>-> Title 1</h4> </a> <div class="hide" id="toggle1" style="display:none"> Some text here. </div> <a onclick="showhide('toggle2');"> <h4>-> Title 2</h4> </a> <div class="hide" id="toggle2" style="display:none"> Other text here. </div> 

Answer 2

此代码解决了借用@abagshaw建议的有关切换（注释我的问题）的技术的问题。 像我以前的解决方案一样，该解决方案将每个锚点的click事件与一个动作动态关联。 使用JavaScript库jQuery允许编写更少和更强大的代码。

 $(document).ready(function() { function showhide(obj) { var showFlag = true; // first: setup for toggle if (obj.css("display") === 'block') { showFlag = !showFlag; } // then: hide all divs ... $("div").each(function() { $(this).hide("slow"); }); // ... and show respective div if showFlag is true if (showFlag) { obj.toggle("slow"); } } $(".hold").each(function(dex) { $(this).click(function() { let e = $(".hide").eq(dex); showhide(e); }); }); }); 

 div.hide { display: none; } ul { font-size: 18pt; list-style-type: none; } li { padding-bottom: 30px; } li:before { content: "->"; /* looks like bullets */ padding-right: 10px; color: green; /* Or a color you prefer */ } a.hold { color: #f0c; text-decoration: none; } a.hold:hover { text-decoration: overline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a class="hold">Title 1</a> <div class="hide" id="toggle1"> Some text here. </div> </li> <li><a class="hold">Title 2</a> <div class="hide" id="toggle2"> Other text here. </div> </li> </ul> 

Answer 3

function showhide(id) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName('hide');

    if (divid.style.display === 'none') {
        divid.style.display = 'block';
    } else{
        divid.style.display = 'none';
    }

    for (var i = 0; i < divs.length; i++) {
        if(divs[i].id !== id)
            divs[i].style.display = 'none';
    }

    return false;
}