javascript – Problem beim Ein- und Ausblenden der Kommentarantwort
黄舟
黄舟 2017-05-19 10:11:32
0
4
476

1. Veröffentlichen Sie zuerst den 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>

Derzeit ist es möglich, zwischen Anzeigen und Ausblenden zu wechseln, aber es gibt einen Fehler, den ich nicht herausgefunden habe. Im Folgenden sind zwei Klicksituationen aufgeführt

1. Wenn Sie zum ersten Mal auf die Schaltfläche „Antworten“ klicken, wird die Klassenanzeige zur Schaltfläche „A“ hinzugefügt und das entsprechende Antwortfeld angezeigt. Wenn Sie zum zweiten Mal auf die Schaltfläche „Aktuelle Antwort“ klicken, wird die if-Anweisung entfernt , die Klassenanzeige wird entfernt und aktuelles Antwortfeld ausblenden

2. Wenn Sie zum ersten Mal auf die Antwortschaltfläche A klicken, wird die Klassenanzeige hinzugefügt und das entsprechende Antwortfeld angezeigt. Klicken Sie dann auf die Schaltfläche B. Die Schaltfläche entfernt auch die else-Anweisung, fügt die Klassenanzeige hinzu und zeigt die Antwort an Wenn ich zu diesem Zeitpunkt erneut auf die Schaltfläche „Antworten“ klicke, wird die Klassenanzeige zu diesem Zeitpunkt entfernt und erst beim zweiten Klicken angezeigt . Offensichtlich stimmt hier etwas nicht, aber ich weiß nicht, wie ich es ändern kann. Ich hoffe, jemand kann mir einen Rat geben. Danke

黄舟
黄舟

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

Antworte allen(4)
世界只因有你

直接贴代码了,原因是因为你hide的时候,没有移除show这个class,多debug一下,问题就迎刃而解了

为情所困

楼主,可以隐藏的时候加hide,显示的时候把hide去掉就可以了

仅有的幸福

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

$(this).parent('.article').siblings().find('.comment-wrap').hide();
$(this).siblings('.comment-wrap').toggle();

});

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

不是最优,参考一下!

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage