如何創建切換狀態的按鈕？-有解無憂

我想創建一個按鈕，單擊該按鈕會更改其名稱和功能。該按鈕稱為“展開”，單擊時允許展開 div。單擊后，我希望它將其功能和文本更改為“縮小”，然后在其中縮小 div。

let expandButton = document.createElement(`button`);
expandButton.setAttribute(`class`, `listButton`);
expandButton.textContent = ` `

if (expandButton.className == `listButton`) {
  expandButton.addEventListener(`click`, (e) => {
    expandButton.setAttribute(`class`, `listButtonClicked`);
  })
}

if (expandButton.className == `listButtonClicked`) {
  console.log(`active`);
  expandButton.addEventListener(`click`, (e) => {
    expandButton.setAttribute(`class`, `listButton`);
  })
}

單擊按鈕時，它只會展開。再次點擊后，它什么也不做；第二個區域中的console.log行甚至沒有注冊。

uj5u.com熱心網友回復：

昨天，我在這里寫了一個非常相似的答案。我已經更新了我的代碼以包含一個“少顯示”按鈕：

for (const el of document.getElementsByClassName('shorten')) {
  const text = el.textContent;
  const summary = text.substring(0, 70)   '... ';
  el.textContent = summary;

  const showmore = document.createElement('span');
  showmore.textContent = 'Show more';
  showmore.style.fontWeight = 'bold';
  
  const showless = document.createElement('span');
  showless.textContent = 'Show less';
  showless.style.fontWeight = 'bold';
  
  showmore.addEventListener('click', () => {
    el.textContent = text;
    el.append(showless);
  });
  
  showless.addEventListener('click', () => {
    el.innerHTML = "";
    el.textContent = summary;
    el.append(showmore);
  });

  el.append(showmore);
}

/* just for demostration purposes. not actually needed */

.box {
  width: 200px;
  height: 100px;
  background-color: lightgray;
  overflow: auto;
  margin: 10px;
  display: inline-block;
}

<div class="box shorten">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac elementum nunc. Cras vehicula, ante nec iaculis semper, mi justo ornare ipsum, ac sollicitudin tortor tellus at magna. In augue.
</div>

<div class="box shorten">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac elementum nunc. Cras vehicula, ante nec iaculis semper, mi justo ornare ipsum, ac sollicitudin tortor tellus at magna. In augue.
</div>

<div class="shorten">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac elementum nunc. Cras vehicula, ante nec iaculis semper, mi justo ornare ipsum, ac sollicitudin tortor tellus at magna. In augue.
</div>

還應該注意的是，有一個<summary>標簽可以做類似的事情。但是，這不適用于您的情況，因為您想動態縮短頁面。

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

標籤：javascript按钮方法dom 事件

上一篇：我的html檔案路徑似乎不想作業，據我所知，一切都在按應有的方式完成

下一篇：單擊按鈕時如何清除輸入？