css 显示更多的div的内容文本时,内部按钮或div本身被点击

xxls0lw8  于 2023-03-24  发布在  其他
关注(0)|答案(3)|浏览(183)

我有这个代码,我想知道我是否可以显示其余的文本时,点击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>
eufgjt7s

eufgjt7s1#

实现这一点的一种方法是只在父节点上使用事件侦听器,并更改查询选择器,使其使用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>
p5cysglq

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)。为了避免同一事件两次调用处理程序,我检查触发事件的元素是否是按钮,在这种情况下,它将停止传播(冒泡到父事件)。

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>
qncylg1j

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。他指出;- )

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>

相关问题