JQuery向下/向上滑动 - 仅显示同一个类名中的一个div

Question

我已经创建了UL列表，每个LI有两个DIV - 一个可见问题标签和一个隐藏答案标签。在标签的右侧有一个按钮（问题标签有SlideDown按钮，回答标签有SlideUp按钮）。但是一旦我点击这些按钮，就会显示整个UL列表中的所有DIV。我如何只显示点击的内容并让其余的DIV隐藏？

HTML看起来如下：

<ul> 
    <li> 
    <div class="questionTab" id="firstTab">What is the natural color for Dory? 
     <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span> 
    </div> 
    <div class="answerTab">Answer: It's blue. 
     <span class="slideUpButton" style="background-color: red">SLIDEUP</span> 
    </div> 
    </li> 
</ul> 

对于这个职位，我排除了总体布局，如补白，边距，颜色等

.answerTab { 
    display: none; 
    } 

和jQuery脚本看起来像下面这将当前打开的在UL的所有标签：

$(document).ready(function(){ 
     $(".slideDownButton").click(function(){ 
      $(".answerTab").slideDown("slow"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(".slideUpButton").click(function(){ 
      $(".answerTab").slideUp("slow"); 
     }); 
    }); 

但是，基于一些研究，一些人有s同样的问题，因为我试图做出以下调整，只显示点击DIV，所以它最终看起来像这样，但它不工作。

$(document).ready(function(){ 
     $(".slideDownButton").click(function(){ 
      $(this).parent("li").find(".answerTab").slideDown("slow"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(".slideUpButton").click(function(){ 
      $(this).parent("li").find(".answerTab").slideUp("slow"); 
     }); 
    }); 

所以我请你的帮助和建议。我如何改进下面的代码，我做错了什么？所有的帮助表示赞赏。

Answer 1

您的第一个JQuery代码有效，除了有两个错误。

1. 您只应在脚本的开头调用$(document).ready一次。你应该用$(document).ready函数包装你的JQuery代码。
2. 您写道：$(",answerTab").slideUp("slow"); - 类名answerTab应该有句点，而不是逗号。所以它应该这样写：$(".answerTab").slideUp("slow");

下面是你的代码的工作版本。你也可以看看这个CodePen Demo。我希望这有帮助。

$(document).ready(function() { 
 
    $(".slideDownButton").click(function() { 
 
    $(".answerTab").slideDown("slow"); 
 
    }); 
 
    $(".slideUpButton").click(function() { 
 
    $(".answerTab").slideUp("slow"); 
 
    }); 
 
});

.answerTab { 
 
    display: none; 
 
}

<ul> 
 
    <li> 
 
    <div class="questionTab" id="firstTab">What is the natural color for Dory? 
 
     <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's blue. 
 
     <span class="slideUpButton" style="background-color: red">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

对于问题和答案多个列表项，你可以遍历与jQuery方法parent和next像这样的DOM：

$(document).ready(function() { 
 
    $(".slideDownButton").click(function() { 
 
    $(this).parent(".questionTab").next(".answerTab").slideDown("slow"); 
 
    }); 
 
    $(".slideUpButton").click(function() { 
 
    $(this).parent(".answerTab").slideUp("slow"); 
 
    }); 
 
});

.answerTab { 
 
    display: none; 
 
} 
 

 
li { 
 
    padding-top: 1rem; 
 
} 
 

 
span { 
 
    background-color: red; 
 
} 
 

 
span:hover { 
 
    cursor: pointer; 
 
    background-color: #E00; 
 
}

<ul> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Dory? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's blue. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Woof? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's brown. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Wolf? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's grey. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>