javascript - 评论回复显示隐藏切换问题
本文介绍了javascript - 评论回复显示隐藏切换问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.首先贴下代码
<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>
<div class="article">
<button class="reply-btn">回复</button>
<div class="comment-wrap hideBox">
<input class="comment-input">
<button class="comment-btn">提交评价</button>
</div>
</div>
<div class="article">
<button class="reply-btn">回复</button>
<div class="comment-wrap hideBox">
<input class="comment-input">
<button class="comment-btn">提交评价</button>
</div>
</div>
</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>目前能够显示隐藏切换了，但是有个bug，没想通，以下是两种点击情况
1.当第一点击回复按钮A的时候，A按钮加上class show,对应的回复框显示，如果第二次还是点击的当前回复按钮，那么就走了if语句，移除class show，并且隐藏当前回复框
2.当第一次点击回复按钮A的时候，A按钮加上class show，对应的回复框显示，然后点击按钮B，按钮也走了else语句，添加class show，并且显示回复框，这时候如果我再次点击回复按钮A的时候，因为回复按钮A在这一种情况下，并没有清楚class show，所以这会儿就移除了class show,接着就隐藏起来了，只有第二次点击才会显示出来，显然这边不对啊，但是不懂怎么改了，希望大牛指点下。谢谢
解决方案
直接贴代码了，原因是因为你hide的时候，没有移除show这个class，多debug一下，问题就迎刃而解了
这篇关于javascript - 评论回复显示隐藏切换问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
