單擊內部按鈕或 div 本身時顯示更多 div 的內容文本

Question

我有這段代碼，我想知道是否可以在單擊 div 區域而不是僅顯示按鈕時顯示其余文本，以及是否可以將它們連接在一起。

 function ReadMore(event) { var dots = event.target.previousElementSibling.querySelector(".dots"); var moreText = event.target.previousElementSibling.querySelector(".more"); var btnText = event.target; if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } }

 .more { display: none; }

 <div class="glide__slide"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme!</span> </p> <button onclick="ReadMore(event)" class="myBtn">Read more</button> </div>

Answer 1

實現此目的的一種方法是僅在父級上設置事件偵聽器。 並更改您的查詢選擇器，以便使用event.currentTarget而不是event.target ，因此無論事件來自div中的哪個位置，它的行為都是相同的。

 function ReadMore(event) { var dots = event.currentTarget.querySelector(".dots"); var moreText = event.currentTarget.querySelector(".more"); var btnText = event.currentTarget.querySelector("button"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } }

 .more { display: none; }

 <div class="glide__slide" onclick="ReadMore(event)"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme!</span> </p> <button class="myBtn">Read more</button> </div>

Answer 2

這里的技巧是在按鈕觸發事件時使用event.stopPropagation() 。 這是因為當按鈕被單擊時，事件將冒泡到父級（因為兩個元素都為該事件注冊了處理程序），否則它將觸發處理程序兩次。

我會更清楚。 您有 div 容器和按鈕都在監聽 click 事件。 如果單擊發生在按鈕上，它將首先導致偵聽按鈕的處理程序觸發。 之后，由於按鈕嵌套在 div 中，並且該 div 有一個監聽 click 事件的處理程序，因此也會觸發該事件（因為據說該事件會冒泡https://developer.mozilla.org/en-美國/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture ）。 為了避免為同一事件調用兩次處理程序，我正在檢查觸發事件的元素是否是按鈕，在這種情況下它將停止傳播（冒泡到父級）。

 function ReadMore(event) { //this is a brutal way to get the html elements based on which element fired the event if(event.target.classList.contains('myBtn')){ btn = event.currentTarget; dots = btn.parentElement.querySelector('.dots'); more = btn.parentElement.querySelector('.more'); }else{ btn = event.currentTarget.querySelector('.myBtn'); dots = event.currentTarget.querySelector('.dots'); more = event.currentTarget.querySelector('.more'); } if (dots.style.display === "none") { dots.style.display = "inline"; btn.innerHTML = "Read more"; more.style.display = "none"; } else { dots.style.display = "none"; btn.innerHTML = "Read less"; more.style.display = "inline"; } if(event.target.classList.contains('myBtn')) window.event.stopPropagation(); }

 button.myBtn{ cursor: pointer; }

 <div class="glide__slide" onclick="ReadMore(event)"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more" style="display:none;">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme! </span> </p> <button onclick="ReadMore(event)" class="myBtn">Read more</button> </div>

Answer 3

更新使用 currentTarget 並在整個 div 上分配點擊事件。 https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

我的第一個答案是我建議使用parentNode來獲取 div。 https://developer.mozilla.org/en/docs/Web/API/Node/parentNode 。 但是，如果您單擊隱藏的跨度，這將出現錯誤。 感謝@yousoumar。 他指出 ;-)

 function ReadMore(event) { const div = event.currentTarget; var dots = div.querySelector(".dots"); var moreText = div.querySelector(".more"); var btnText = div.querySelector("button"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } }

 .more { display: none; }

 <div class="glide__slide" onclick="ReadMore(event)"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme!</span></p> <button class="myBtn">Read more</button> </div>