javascript - Réponse au commentaire Afficher/Masquer le problème de bascule
黄舟
黄舟 2017-05-19 10:11:32
0
4
478

1. Postez d'abord le 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>

Actuellement, il est possible de basculer entre afficher et masquer, mais il y a un bug que je n'ai pas compris. Voici deux situations de clic.

1. Lorsque vous cliquez pour la première fois sur le bouton de réponse A, l'émission de classe est ajoutée au bouton A et la boîte de réponse correspondante est affichée. Si le bouton de réponse actuel est cliqué une deuxième fois, l'instruction if est supprimée. , l'émission de classe est supprimée et masquer la boîte de réponse actuelle

2. Lorsque vous cliquez sur le bouton de réponse A pour la première fois, le bouton A ajoute une émission de classe et la boîte de réponse correspondante s'affiche. Cliquez ensuite sur le bouton B, et le bouton supprime également l'instruction else, ajoute une émission de classe et affiche la réponse. À ce moment-là, si je clique à nouveau sur le bouton de réponse A, car le bouton de réponse A n'a pas d'affichage de classe clair dans ce cas, l'affichage de classe sera supprimé à ce moment-là, puis masqué. Seul le deuxième clic sera affiché. . Évidemment, quelque chose ne va pas ici, mais je ne sais pas comment le changer. J'espère que quelqu'un pourra me donner des conseils. Merci

黄舟
黄舟

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

répondre à tous(4)
世界只因有你

J'ai posté le code directement. La raison est que vous n'avez pas supprimé la classe show lorsque vous la masquez. Si vous la déboguez davantage, le problème sera résolu

.

为情所困

Original, ajoutez du cache lorsque vous souhaitez le masquer et supprimez le masque lorsque vous souhaitez l'afficher

仅有的幸福

$('.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>

Pas optimal, merci de vous y référer !

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal