javascript - 評論回應顯示隱藏切換問題
黄舟
黄舟 2017-05-19 10:11:32
0
4
454

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

目前能夠顯示隱藏切換了,但有個bug,沒想通,以下是兩種點擊狀況

1.當第一點擊回覆按鈕A的時候,A按鈕加上cla​​ss show,對應的回覆框顯示,如果第二次還是點擊的當前回覆按鈕,那麼就走了if語句,移除class show ,並且隱藏目前回應框

2.當第一次點擊回覆按鈕A的時候,A按鈕加上cla​​ss show,對應的回覆框顯示,然後點擊按鈕B,按鈕也走了else語句,加入class show,並且顯示回覆框,這時候如果我再點擊回覆按鈕A的時候,因為回覆按鈕A在這一種情況下,並沒有清楚class show,所以這會兒就移除了class show,接著就隱藏起來了,只有第二次點擊才會顯示出來,顯然這邊不對啊,但不懂怎麼改了,希望大牛指點下。謝謝

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回覆(4)
世界只因有你

直接貼程式碼了,原因是因為你hide的時候,沒有移除show這個class,多debug一下,問題就迎刃而解了

为情所困

樓主,可以隱藏的時候加hide,顯示的時候把hide去掉就可以了

仅有的幸福

$('.reply-btn').click(function(){

雷雷

});

世界只因有你
<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>

不是最優,參考一下!

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板