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

我已经创建了UL列表，每个LI有两个分区-一个可见的问题选项卡和一个隐藏的答案选项卡。选项卡右侧有一个按钮“问题”选项卡有向下滑动按钮，“回答”选项卡有向下滑动按钮。但一旦我点击这些按钮，它就会显示整个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>

JQuery脚本如下所示，当前将打开UL中的所有选项卡：

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

然而，根据一些研究，有些人和我有类似的问题，我试图做如下调整，只显示单击的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");
        });
    });

---

所以我请求你的帮助和建议。如何改进以下代码，我做错了什么？非常感谢您的帮助。

您的第一个JQuery代码可以正常工作，但有两个错误

您只应在脚本开头调用$document.ready一次。您应该使用$document.ready函数包装JQuery代码。 您写道：$，answerTab.slideUpslow；-类名answerTab应该有句点，而不是逗号。所以应该这样写：$.answerTab.slideUpslow； 下面是代码的工作版本。你也可以看看这个。我希望这有帮助

$document.readyfunction{ $.slideDownButton.clickfunction{ $.answerTab.slideDownslow； }; $.slideUpButton.clickfunction{ $.answerTab.slideUpslow； }; }; .回答表{ 显示：无； } 多莉的自然色是什么？ 下滑 回答：它是蓝色的。 滑梯

---

我的天，当我试图显示第一个代码时，我犯了一个错误，这个代码起作用了，但是犯了一个错误。确实应该有一个点。谢谢你指出这一点。但是我如何才能只显示一个DIV而隐藏其余的DIV呢？这实际上是通过显示和隐藏DIV类名answerTab一次只显示一个DIV，即有两个DIV questionTab和answerTab-此代码显示和隐藏answerTab DIV。是否要显示和隐藏列表项？这也是可能的。是的，最初UL包含大约6-8个列表项。我只是在这里复制了一个。如果UL中只有一个列表项，那么第一个JQuery脚本可以正常工作。但是，如果UL中有两个或多个LIs，则单击它会显示所有LIs的应答选项卡div。每个问题选项卡都会有不同的问题，答案选项卡也是如此。但是一次只显示一个应答选项卡，特别是您单击的应答选项卡。我的问题是如何只显示单击的一个，并保持其余的一个不变。我明白了-我更新了-为了清晰起见，我还将添加上面的代码。非常感谢！Codepen演示中的更新代码就是我想要的答案：

 $(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");
        });
    });