Question

我正在尝试添加＆＃34;显示更多/显示更少＆＃34;我博客上的文章按钮。

问题1.我能够让活动发挥作用，但因为它没有针对点击的按钮，所以活动打开并关闭了所有内容。

问题2.我让它在目标上打开和关闭，但现在应该有类似动作的其他按钮不会做任何事情。

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

＆＃13;

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";
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您的JS上有一些语法错误，因此会导致问题。首先，我将id添加到元素中，因此使用vanilla JS可以轻松地在DOM中找到它。
的修改
好吧，如果您需要许多按钮来处理不同的内容，那么您需要类似于下面编辑的代码。（它不是很一致或非常专业，但它有效）

我移动了divs内的按钮，这样就可以知道每个按钮属于哪个div并且适用。
按className。
遍历每个按钮添加监听器。
听众正在寻找按钮的父级，然后是内部的<p>，这样你只能找到一个（如果你保持这个确切的结构）。
请在下方查看。

（视频：如果每个帖子都有一个section，那么你需要修改我的结构，但只需遵循这个逻辑就可以到达那里）

＆＃13;

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";
    }
  });
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我选择了不同的切线，看看这会有所帮助......

我没有使用事件监听器，而是将函数调用添加到按钮的onclick：

<button class="show-more" onclick="contentView(this);" data-state="closed">Read More</button>

我还给它一个data- *元素，命名为data-state。

这个想法是，通过直接从按钮调用，您不必担心检查动作的触发位置。此外，通过在按钮上设置数据状态，我们可以跟踪按钮的打开/关闭值，而无需深入CSS类名称（或尝试在JavaScript本身中跟踪它）。它只是一种跟踪元素数据的好方法，而不需要深入挖掘它的属性。

按钮的onclick传递了术语this，它允许我们以调用动作的元素为目标...（在函数内部，按钮由参数名称＆＃39;元素＆＃表示39）

该功能看起来有点像这样：

function contentView( element ){
    let parent = element.parentNode;
    let content = parent.querySelector('.content');
    let state  = element.getAttribute('data-state');
    if( state.toLowerCase() === 'closed' ){
        element.setAttribute('data-state', 'open');
        element.innerHTML = 'Show Less';
        content.classList.add('open');
    }else{
        element.setAttribute('data-state', 'closed');
        element.innerHTML = 'Show More';
        content.classList.remove('open');
    }
}

这是我使用原始代码制作的JS小提琴的链接。 https://jsfiddle.net/tqx5yfco/45/

（jsFiddle演示中的动作） https://fiddle.jshell.net/tqx5yfco/45/show/

我在重复部分中添加了以显示使用不同块生效的代码。（更多评论可以在小提琴中找到）

JavaScript在目标按钮上显示更多信息

2 个答案: