我有这个代码,我想知道我是否可以显示其余的文本时,点击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>
3条答案
按热度按时间eufgjt7s1#
实现这一点的一种方法是只在父节点上使用事件侦听器,并更改查询选择器,使其使用
event.currentTarget
而不是event.target
,因此无论事件来自div
中的何处,其行为都是相同的。p5cysglq2#
这里的技巧是在按钮触发事件时使用
event.stopPropagation()
。这是因为当按钮被点击时,事件将冒泡到父元素(因为两个元素都有为该事件注册的处理程序),否则它将触发处理程序两次。我会说得更清楚。你有div容器和按钮都在监听click事件。如果按钮上发生了click,它将首先导致监听按钮的处理程序触发。之后,由于按钮嵌套在div中,并且该div有一个监听click事件的处理程序,因此该处理程序也将被触发(因为据说该事件会冒泡https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)。为了避免同一事件两次调用处理程序,我检查触发事件的元素是否是按钮,在这种情况下,它将停止传播(冒泡到父事件)。
qncylg1j3#
update使用currentTarget,在整个div上分配click事件。https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
我的第一个答案我建议使用
parentNode
来获取div. https://developer.mozilla.org/en/docs/Web/API/Node/parentNode。但是如果你点击隐藏的跨度,这将产生错误。感谢@YoussoufOumar。他指出;- )