Question

我有这个脚本：

$(document).ready(function(){
    $(".info").click(function(){
        $(this).addClass('active');
        $(this).siblings('.conteudo').slideDown(500);
        $(this).parents().siblings().children('.conteudo').slideUp(450);
        $(this).parents().siblings().children('.info').removeClass('active');
    });
});

以下是HTML：

<div>
  <div class="info nome"></div>
  <div class="conteudo texto">conteudo</div>
</div>

<div>
  <div class="info nome"></div>
  <div class="conteudo ls">
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
  </div>
</div>

<div>
  <div class="info nome"></div>
  <div class="conteudo texto">this is where the content goes</div>
</div>

我希望在点击相同的.conteudo类时添加隐藏.info的可能性。现在只要点击一个.info课程，其.conteudo课程会在点击下一个/上一个.info课程时显示并隐藏，所以我想让它成为人们可以通过在.conteudo类上单击两次来隐藏.info类，而不会弄乱它已有的显示/隐藏效果。

我是jQuery的新手，我正在努力学习这些东西，所以请你好。我已经寻求过这方面的帮助，但我找不到任何有用的东西。非常感谢你，如果我浪费你的时间，请对不起。

Answer 1

您可以添加一个检查，如果您点击了活动的那个，然后向上滑动，如果是这样的话：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="info nome">toggle</div>
  <div class="conteudo texto">conteudo</div>
</div>

<div>
  <div class="info nome">toggle</div>
  <div class="conteudo ls">
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
  </div>
</div>

<div>
  <div class="info nome">toggle</div>
  <div class="conteudo texto">this is where the content goes</div>
</div>

{{1}}

Answer 2

这更简单：

$(document).ready(function(){
  $(".info").on("click", function(){
    var info = $(this);
    if (info.hasClass('active')) {
      info.removeClass('active').siblings('.conteudo').slideUp(450);
    } else {
      info.addClass('active').siblings('.conteudo').slideDown(500);
    }
  });
});

Answer 3

您可以查看hasClass并恢复您的操作。

$(function(){
    $(".info").click(function(){
        if( !$(this).hasClass('active') ) {
            $(this).addClass('active');
            $(this).siblings('.conteudo').slideDown(500);
            $(this).parents().siblings().children('.conteudo').slideUp(450);
            $(this).parents().siblings().children('.info').removeClass('active');
        }
        else {
          $(this).removeClass('active');
          $(this).siblings('.conteudo').slideUp(500);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="info nome">INFO</div>
  <div class="conteudo texto">conteudo</div>
</div>

<div>
  <div class="info nome">INFO</div>
  <div class="conteudo ls">
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
  </div>
</div>

<div>
  <div class="info nome">INFO</div>
  <div class="conteudo texto">this is where the content goes</div>
</div>

点击切换不能隐藏课程？

3 个答案: