单击内部按钮或 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>