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

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; 
} 

Answer 3

此代碼解析借用通過@abagshaw相對於所述肘節（註釋礦）提出的技術的問題。像我以前的解決方案這種解決方案動態地將每個錨點的點擊事件與一個動作關聯使用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>