多個顯示和隱藏按鈕

Question

我希望顯示更多和隱藏按鈕可用於多個文本內容，現在僅適用於其中之一。 我想使用12種不同的按鈕來顯示和隱藏12種不同的文本，例如代碼中的一個。 我該怎么做呢？

 var content = document.getElementById("content"); var button = document.getElementById("show-more"); button.onclick = function() { if (content.className == "open") { //shrink the box content.className = ""; button.innerHTML = "Läs mer"; } else { //expand the box content.className = "open"; button.innerHTML = "Dölj"; } }; 

 <div id="content"> Test </div> <a id="show-more">Läs mer</a> 

Answer 1

使用class比使用id更好。 我實現了一個簡單的代碼段，您可以在其中僅使用類名進行設計。

 var content = document.getElementById("content"); $(".showHide").on("click", function() { $(this).parent().find(".more").toggle(); if ($(this).parent().find(".more").is(":visible")) { $(this).text("Show less"); } else { $(this).text("Show more"); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="content"> <div class="text"> First text1 <div style="display:none;" class="more">Other text 1</div> <a class="showHide" href="#">Show more</a> </div> <hr /> <div class="text"> First text2 <div style="display:none;" class="more">Other text 2</div> <a class="showHide" href="#">Show more</a> </div> </div> 

Answer 2

HejLinnéa！

ID應該是唯一的，並且如果要多次出現，則應使用類名。

我要做的是將鏈接包裝在容器div中；

<div class="content">
    Content
    <a class="toggle" href="#">Läs mer</a>
</div>
<div class="content">
    Content
    <a class="toggle" href="#">Läs mer</a>
</div>

然后，不要將事件偵聽器附加到每個錨元素，而要利用事件傳播 ，然后將偵聽器添加到每個內容包裝器中；

document.querySelectorAll('.content').forEach(function(contentDiv) {
    contentDiv.onclick = function(e) {
        if(e.target.classList.contains('toggle')) {
            e.target.innerHTML = e.currentTarget.classList.contains('open') ? 'Dölj' : 'Läs mer';
            e.currentTarget.classList.toggle('open');
        }
    }
});

Answer 3

使用文檔querySelectorAll

 var content = Array.from(document.querySelectorAll(".container")); content.forEach(function(el){ //var content= el.querySelector(".content"); var button = el.querySelector(".show-more"); button.addEventListener("click", function () { el.classList.toggle("open"); el.classList.contains("open") ? (button.innerHTML = "Dölj") : (button.innerHTML = "Läs mer"); }, false) }); 

 .container .content{display: none} .container.open .content{display: block} 

 <section> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> <article class="container"> <p>Lorem Ipsum is simply dummy</p> <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="show-more">Läs mer</a> </article> </section> 

Answer 4

如果對所有元素使用類，則可以使其適用於多個段落，然后從那里將其作為元素對（ div +對應的button ）進行處理。

我特意將所有內容與原始代碼保持盡可能的相同，因此很容易理解所做的更改。 我還添加了一些“隱藏”內容，因此您確實可以看到正在發生的事情。

 var contentDivs = document.getElementsByClassName("content"); var buttons = document.getElementsByClassName("show-more"); for (var i = 0; i < contentDivs.length; i++) { // "let" creates locally scoped variables for use in the function. let div = contentDivs[i]; let button = buttons[i]; button.onclick = function() { if (div.className == "open") { //shrink the box div.className = "content"; button.innerHTML = "Read more"; } else { //expand the box div.className = "open"; button.innerHTML = "Close"; } }; } 

 div, a { font-size: 14px; } .content { overflow: hidden; max-height: 18px } 

 <div class="content"> Div 1<br />.....<br />.....<br />..... </div> <a class="show-more">Read more</a> <hr size="1"> <div class="content"> Div 2<br />.....<br />.....<br />..... </div> <a class="show-more">Read more</a> <hr size="1">