JavaScript显示更多目标按钮

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

问题1。我已经能够让事件工作，但因为它不是针对点击的按钮，事件一起打开和关闭所有内容

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

下面是到目前为止的代码片段，请提前感谢

按钮。addEventListener（'click'，（e）=>{
让myTarget=e.target.tagName==‘按钮’；
如果（myTarget&&content.className=='content open'）{
//缩小盒子
content.classList.remove（“打开”）；
this.innerHTML=“显示更多”；
}否则{
//展开框
content.classList.add（“打开”）；
this.innerHTML=“显示较少”；
}
});
。显示更多信息{
背景#1594e5；
颜色：#fff；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，Sans-
衬线；
显示：块；
宽度：120px；
字体大小：14px；
文本转换：大写；
填充：8px；
文本对齐：居中；
保证金：20px自动；
光标：指针；
}
.内容p{
宽度：600px；
背景：#fff；
填充：20px；
顶部填充：10；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，Sans-
衬线；
字号：18px；
颜色：#444；
保证金：0自动；
最大高度：70像素；
溢出：隐藏；
/*设置转换*/
-webkit过渡：最大高度0.7s；
-moz过渡：最大高度0.7s；
过渡：最大高度0.7s；
}
.content.openp{
宽度：600px；
背景：#fff；
填充：20px；
顶部填充：10；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，Sans-
衬线；
字号：18px；
颜色：#444；
保证金：0自动；
最大高度：1000px；
溢出：隐藏；
/*设置转换*/
-webkit过渡：最大高度0.7s；
-moz过渡：最大高度0.7s；
过渡：最大高度0.7s；
}

欢迎来到我的博客
2018年4月2日博客帖子
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。
暂时性的最大幸福感，别名为iure enim准幸福感
液体性借方，除此之外的液体性借方。A.
可能。Lorem ipsum dolor sit amet

阅读更多
您的JS中有一些语法错误，因此会导致问题。
首先，我在元素中添加了
id
，因此使用vanilla JS可以很容易地在DOM中找到它

编辑

好的，如果您需要许多按钮来处理不同的内容，那么您需要类似于下面我编辑的代码的东西。（虽然不太一致，也不太专业，但很有效）

我移动了
div中的按钮，因此有一种方法可以知道每个按钮所属的div和工作的div。

通过
className
获取页面上的所有按钮

循环通过每个按钮添加侦听器
侦听器正在查找按钮的父级，然后查找按钮内部的
，这样您将只找到一个按钮（如果您保持此确切结构）
看看下面
（注：如果每个帖子都有一个
部分
，那么你需要修改我的结构，但只要遵循这个逻辑，你就会到达那里）


var allButtons=document.getElementsByClassName（“显示更多”）；
对于（变量i=0；i{
设myTarget=e.target；
var content=myTarget.parentElement.children[0]；//获取第一个子项=
if（myTarget&&content.style.display=='block'）{
content.style.display='none'
myTarget.innerHTML=“显示更多”；
}否则{
//展开框
content.style.display='block'
myTarget.innerHTML=“显示较少”；
}
});
}
。显示更多信息{
背景#1594e5；
颜色：#fff；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，Sans-
衬线；
显示：块；
宽度：120px；
字体大小：14px；
文本转换：大写；
填充：8px；
文本对齐：居中；
保证金：20px自动；
光标：指针；
}
.内容p{
宽度：600px；
背景：#fff；
填充：20px；
顶部填充：10；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，Sans-
衬线；
字号：18px；
颜色：#444；
保证金：0自动；
最大高度：70像素；
溢出：隐藏；
显示：无；
/*设置转换*/
-webkit过渡：最大高度0.7s；
-moz过渡：最大高度0.7s；
过渡：最大高度0.7s；
}
.公开发行{
宽度：600px；
背景：#fff；
填充：20px；
顶部填充：10；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，Sans-
衬线；
字号：18px；
颜色：#444；
保证金：0自动；
最大高度：1000px；
溢出：隐藏；
显示：块；
/*设置转换*/
-webkit过渡：最大高度0.7s；
-moz过渡：最大高度0.7s；
过渡：最大高度0.7s；
}

欢迎来到我的博客
2018年4月2日博客帖子
新闻1

阅读更多
新闻2

阅读更多
新闻3

阅读更多
我选择了另一条切线，看看这是否有帮助

我将函数调用添加到按钮的onclick，而不是事件侦听器：

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

这里有一个链接，指向我使用您的原始代码制作的JS小提琴。

（JSFIDLE演示正在运行）

我添加了两个部分，用不同的块显示有效的代码。
（更多的评论可以在小提琴上找到）
这是一种有效的方法，但是现在几乎每个人都不鼓励使用内联javascript函数（比如将
onclick
直接放在一个元素上）。感谢您的回复，这是一个很酷的方法
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');
    }
}