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

然而，根据一些研究，有些人和我有类似的问题，我试图进行以下调整，只显示点击的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代码有效，除了有两个错误。

您只应在脚本开头调用$(document).ready一次。您应该使用$(document).ready函数包装JQuery代码。
您写道：$(",answerTab").slideUp("slow"); - 班级名称answerTab应该有句号，而不是逗号。所以它应该写成：$(".answerTab").slideUp("slow");

以下是您的代码的工作版本。您还可以查看 CodePen Demo 。我希望这会有所帮助。

＆＃13;

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

＆＃13;

.answerTab {
  display: none;
}

＆＃13;

<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>

＆＃13;

对于包含问题和答案的多个列表项，您可以使用JQuery方法parent和next遍历DOM，如下所示：

＆＃13;

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

＆＃13;

.answerTab {
  display: none;
}

li {
  padding-top: 1rem;
}

span {
  background-color: red;
}

span:hover {
  cursor: pointer;
  background-color: #E00;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: