1.先貼下程式碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題</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">回復(fù)</button>
<p class="comment-wrap hideBox">
<input class="comment-input">
<button class="comment-btn">提交評(píng)價(jià)</button>
</p>
</p>
<p class="article">
<button class="reply-btn">回復(fù)</button>
<p class="comment-wrap hideBox">
<input class="comment-input">
<button class="comment-btn">提交評(píng)價(jià)</button>
</p>
</p>
</body>
<script>
$('.reply-btn').click(function(){
var $commentWrap = $(this).siblings('.comment-wrap');
// 3. 點(diǎn)擊其他回復(fù)按鈕時(shí)，原先的回復(fù)框隱藏
$(this).parent('.article').siblings().find('.comment-wrap').hide();
// 判斷點(diǎn)擊一次回復(fù)，顯示回復(fù)框，再點(diǎn)擊一次就隱藏
if($commentWrap.hasClass('show')){
// 隱藏
$commentWrap.removeClass('show').hide();
}else{
// 顯示
$commentWrap.addClass('show').show();
}
});
</script>
</html>目前能夠顯示隱藏切換了，但有個(gè)bug，沒想通，以下是兩種點(diǎn)擊狀況
1.當(dāng)?shù)谝稽c(diǎn)擊回覆按鈕A的時(shí)候，A按鈕加上cla??ss show,對(duì)應(yīng)的回覆框顯示，如果第二次還是點(diǎn)擊的當(dāng)前回覆按鈕，那麼就走了if語(yǔ)句，移除class show ，並且隱藏目前回應(yīng)框
2.當(dāng)?shù)谝淮吸c(diǎn)擊回覆按鈕A的時(shí)候，A按鈕加上cla??ss show，對(duì)應(yīng)的回覆框顯示，然後點(diǎn)擊按鈕B，按鈕也走了else語(yǔ)句，加入class show，並且顯示回覆框，這時(shí)候如果我再點(diǎn)擊回覆按鈕A的時(shí)候，因?yàn)榛馗舶粹oA在這一種情況下，並沒有清楚class show，所以這會(huì)兒就移除了class show,接著就隱藏起來了，只有第二次點(diǎn)擊才會(huì)顯示出來，顯然這邊不對(duì)啊，但不懂怎麼改了，希望大牛指點(diǎn)下。謝謝
4
0
0
人生最曼妙的風(fēng)景，竟是內(nèi)心的淡定與從容！
直接貼程式碼了，原因是因?yàn)槟鉮ide的時(shí)候，沒有移除show這個(gè)class，多debug一下，問題就迎刃而解了
<script>
$(function(){
$('.reply-btn').click(function(){
var wrap = $(this).next();
if(wrap.hasClass("show")){
wrap.removeClass("show").fadeOut(200);
}else{
$(".comment-wrap").removeClass("show").hide();
wrap.addClass("show").fadeIn(500);
}
});
})
</script>不是最優(yōu)，參考一下！
