JavaScript 在目标按钮上显示更多内容

Question

我正在尝试为我的博客上的文章添加“显示更多/显示更少”按钮。

问题 1。我已经能够使该事件正常工作，但由于它不是针对单击的按钮，因此该事件一起打开和关闭了所有内容。

问题 2。我让它在目标上打开和关闭，但现在其他应该具有类似操作的按钮不会执行任何操作。

这是到目前为止的代码片段，提前致谢。

button.addEventListener('click', (e) => {
  let myTarget = e.target.tagName === 'BUTTON';
  if (myTarget && content.className == 'content open') {
      //shrink the box
      content.classList.remove("open");
      this.innerHTML = "Show More";
  } else {
      //expand the box
      content.classList.add("open");
      this.innerHTML = "Show Less";
  }
});

.show-more {
    background: #1594e5;
    color: #fff;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans- 
serif;
    display: block;
    width: 120px;
    font-size: 14px;
    text-transform: uppercase;
    padding: 8px;
    text-align: center;
    margin: 20px auto;
    cursor: pointer;
}

.content p {
    width: 600px;
    background: #fff;
    padding: 20px;
    padding-top: 10;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans- 
serif;
    font-size: 18px;
    color: #444;
    margin: 0 auto;
    max-height: 70px;
    overflow: hidden;
    /* Set transitions up. */
    -webkit-transition: max-height 0.7s;
    -moz-transition: max-height 0.7s;
    transition: max-height 0.7s;
}

.content.open p {
    width: 600px;
    background: #fff;
    padding: 20px;
    padding-top: 10;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans- 
serif;
    font-size: 18px;
    color: #444;
    margin: 0 auto;
    max-height: 1000px;
    overflow: hidden;
    /* Set transitions up.*/
    -webkit-transition: max-height 0.7s;
    -moz-transition: max-height 0.7s;
    transition: max-height 0.7s;
}

<section>
    <h2>Welcome to my <span class="primary-text">Blog</span></h2>
    <h1>Apr 2, 2018 blog post</h1>
    <div class="content">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
Tempore maxime fugiat itaque nesciunt alias iure enim quasi quae in 
voluptatum, aliquid debitis ad excepturi, illo velit aperiam cum. A, 
possimus. Lorem ipsum dolor sit amet</p>
    </div>
    <button class="show-more">Read More</button>
</section>

Answer 1

你的 JS 中有一些语法错误，所以它导致了问题。 首先，我添加了id到元素，所以使用 vanilla JS 你可以轻松地在 DOM 中找到它。
编辑
好的，如果您需要许多按钮用于不同的内容，那么您需要类似于下面我编辑的代码。 (它不太一致或非常专业，但它有效)

1. 我将按钮移至 divs 内，因此有一种方法可以知道每个按钮属于哪个 div 并对其起作用。
   
2. 通过 className 获取页面上的所有按钮.
   
3. 循环添加监听器的每个按钮。
4. 监听器正在查找按钮的父级，然后查找 <p>就在里面，这样你就只能找到一个(如果你保持这个精确的结构)。
5. 请查看下面的内容。

(观察:如果每篇文章都有一个section，那么您将需要修改我的结构，但只要遵循这个逻辑，您就会到达那里)

var allButtons = document.getElementsByClassName("show-more");

for (var i = 0; i < allButtons.length; i++){
  allButtons[i].addEventListener('click', (e) => {
    let myTarget = e.target;
    var content = myTarget.parentElement.children[0]; //get the first children = <p> 
    if (myTarget && content.style.display == 'block') {
        content.style.display = 'none'
        myTarget.innerHTML = "Show More";
    } else {
        //expand the box
        content.style.display = 'block'
        myTarget.innerHTML = "Show Less";
    }
  });
}

.show-more {
    background: #1594e5;
    color: #fff;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans- 
serif;
    display: block;
    width: 120px;
    font-size: 14px;
    text-transform: uppercase;
    padding: 8px;
    text-align: center;
    margin: 20px auto;
    cursor: pointer;
}

.content p {
    width: 600px;
    background: #fff;
    padding: 20px;
    padding-top: 10;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans- 
serif;
    font-size: 18px;
    color: #444;
    margin: 0 auto;
    max-height: 70px;
    overflow: hidden;
    display: none; 
    /* Set transitions up. */
    -webkit-transition: max-height 0.7s;
    -moz-transition: max-height 0.7s;
    transition: max-height 0.7s;
}

.open p {
    width: 600px;
    background: #fff;
    padding: 20px;
    padding-top: 10;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans- 
serif;
    font-size: 18px;
    color: #444;
    margin: 0 auto;
    max-height: 1000px;
    overflow: hidden;
    display: block;
    /* Set transitions up.*/
    -webkit-transition: max-height 0.7s;
    -moz-transition: max-height 0.7s;
    transition: max-height 0.7s;
}

<section>
    <h2>Welcome to my <span class="primary-text">Blog</span></h2>
    <h1>Apr 2, 2018 blog post</h1>    
    <div class="content" id="myContent">
        <p>News 1</p>
      <button class="show-more">Read More</button>
    </div>
    
    <div class="content" id="myContent">
        <p>News 2</p>
      <button class="show-more">Read More</button>
    </div>
    
    <div class="content" id="myContent">
        <p>News 3</p>
      <button class="show-more">Read More</button>
    </div>
</section>