1. First paste the code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<style>
.hideBox{
display: none;
}
</style>
<body>
<p class="article">
<button class="reply-btn">回复</button>
<p class="comment-wrap hideBox">
<input class="comment-input">
<button class="comment-btn">提交评价</button>
</p>
</p>
<p class="article">
<button class="reply-btn">回复</button>
<p class="comment-wrap hideBox">
<input class="comment-input">
<button class="comment-btn">提交评价</button>
</p>
</p>
</body>
<script>
$('.reply-btn').click(function(){
var $commentWrap = $(this).siblings('.comment-wrap');
// 3. 点击其他回复按钮时，原先的回复框隐藏
$(this).parent('.article').siblings().find('.comment-wrap').hide();
// 判断点击一次回复，显示回复框，再点击一次就隐藏
if($commentWrap.hasClass('show')){
// 隐藏
$commentWrap.removeClass('show').hide();
}else{
// 显示
$commentWrap.addClass('show').show();
}
});
</script>
</html>Currently, it is possible to switch between display and hide, but there is a bug. I didn’t figure it out. The following are two click situations
1. When the reply button A is clicked for the first time, the A button is added with class show, and the corresponding reply box is displayed. If the current reply button is clicked for the second time, then the if statement is removed and the class show is removed. , and hide the current reply box
2. When you click reply button A for the first time, add class show to button A, and the corresponding reply box will be displayed. Then click button B, and the button will also have an else statement, add class show, and display the reply box. At this time, if I click reply button A again, because reply button A does not have a clear class show in this case, the class show will be removed at this time, and then it will be hidden. Only the second time It will be displayed only after clicking. Obviously something is wrong here, but I don’t know how to change it. I hope someone can give me some advice. Thanks
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I posted the code directly. The reason is because you did not remove the show class when you hide it. If you debug it more, the problem will be solved
Original, add hide when you want to hide it, and remove hide when you want to show it
$('.reply-btn').click(function(){
});
Not optimal, please refer to it!