Question

我的大脑完全融化了，但是我不记得如何在点击事件中如何使特定的div执行jQuery slideDown。

这就是我一直在尝试的事情：

$('.content--link').on('click', function(e) {
  $(this).next('.content').slideToggle();
  e.preventDefault();
});

body {
  padding: 20px;
}

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
  <div class="link">
    <a class="content--link" href="#">Click this 1</a>
  </div>
  <div class="content">
    <p>This is the content to show for 1</p>
  </div>
</div>

<div class="group">
  <div class="link">
    <a class="content--link" href="#">Click this 2</a>
  </div>
  <div class="content">
    <p>This is the content to show for 2</p>
  </div>
</div>

Link to Demo (CodePen)

我之前已经做过，但是我不确定我做错了什么。我认为我可能需要遍历然后再下移.parents吗？无论如何，这已经是一天了。

Answer 1

几乎使用$(this).parent().next('.content')。

.next（）在这种情况下不能单独工作，因为它会立即获得匹配元素集中每个元素的同级兄弟。 content--link没有兄弟姐妹，但它的父母（div.link）有。

https://api.jquery.com/next/

https://api.jquery.com/parent/

Answer 2

您缺少parent()。在parent之前使用next切换下一个格。

$('.content--link').on('click', function(e) {
  $(this).parent().next('.content').slideToggle();
  e.preventDefault();
});

body {
  padding: 20px;
}

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
  <div class="link">
    <a class="content--link" href="#">Click this 1</a>
  </div>
  <div class="content">
    <p>This is the content to show for 1</p>
  </div>
</div>

<div class="group">
  <div class="link">
    <a class="content--link" href="#">Click this 2</a>
  </div>
  <div class="content">
    <p>This is the content to show for 2</p>
  </div>
</div>

Answer 3

只需尝试添加parent()

$(this).parent().next('.content').slideToggle();

Answer 4

您只需使用Bootstrap即可实现此目的，只需尝试以下代码即可。


<html>
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <br>
  <a href="#"  data-toggle="collapse" data-target="#demo">Item #1</a>
  <div id="demo" class="collapse">
   Collapsible Group Item #1
  </div>

   <br> <br>
 <a href="#"  data-toggle="collapse" data-target="#demo1">Item #2</a>
  <div id="demo1" class="collapse">
  Collapsible Group Item #2
  </div>

    <br> <br>
   <a href="#" data-toggle="collapse" data-target="#demo3">Item #3</a>  
  <div id="demo3" class="collapse">
  Collapsible Group Item #3
  </div>
</div>
</body>
</html>

jQuery在单击时向下滑动特定的div

4 个答案: