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 actuelle2. 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
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(){
});
Pas optimal, merci de vous y référer !