單擊內部按鈕或div本身時顯示更多div的內容文本-有解無憂

我有這段代碼，我想知道是否可以在單擊 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ásnych, ?istych zrenovovanych 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 vyhled 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>

uj5u.com熱心網友回復：

實作此目的的一種方法是僅在父級上設定事件偵聽器。并更改您的查詢選擇器，以便使用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ásnych, ?istych
    zrenovovanych 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 vyhled 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>

uj5u.com熱心網友回復：

這里的技巧是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ásnych, ?istych 
      zrenovovanych 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 vyhled 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>

uj5u.com熱心網友回復：

更新使用 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ásnych, ?istych 
    zrenovovanych 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 vyhled 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483152.html

標籤：javascript html css

上一篇：React：如果用戶輸入文本，則在單擊“提交”按鈕時顯示錯誤訊息

下一篇：無法集中網站中的內容