Question

我想要做的是当你点击实际的锚标签时...我想让下面的div滑动...滑动切换的唯一方法是如果我将点击功能目标更改为＆＃34 ; .flip＆＃34;上课而不是＆＃34;。翻录a＆＃34;

＆＃13;

// and Here is the JS
// Slide panels

$('.flip a').click(function(e) {
  $(this).next('div.panel').slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="flip">
  <h4>Example</h4>
  <a href="">Link Button</a>
</div>
<div class="panel" style="display: none;">
  <p>Example Panel</p>
</div>
<!--End panel-->

<div class="flip">
  <h4>Example</h4>
  <a href="">Link Button</a>
</div>
<div class="panel" style="display: none;">
  <p>Example Panel</p>
</div>
<!--End panel-->

＆＃13;

Answer 1

.next()寻找兄弟姐妹，.panel不是。您需要先向上移动到父.flip元素。

$(this).closest('.flip').next('div.panel').slideToggle();

https://api.jquery.com/category/traversing/tree-traversal/

（您可能也想取消e.preventDefault()的默认点击。）

$('.flip a').click(function(e) {
  e.preventDefault(); // cancel the default click
  $(this).closest('.flip').next('div.panel').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="flip">
  <h4>Example</h4>
  <a href="">Link Button</a>
</div>
<div class="panel" style="display: none;">
  <p>Example Panel</p>
</div>
<!--End panel-->

<div class="flip">
  <h4>Example</h4>
  <a href="">Link Button</a>
</div>
<div class="panel" style="display: none;">
  <p>Example Panel</p>
</div>
<!--End panel-->

Answer 2

如在另一个答案中所述，接下来尝试使用提供的选择器找到相同的级别元素，因此您可以使用.parent().next()。此外，当您点击.flip a。

时，您的href会将您带到其他地方

$('.flip a').click(function(e) {
  $(this).parent().next('.panel').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="flip">
  <h4>Example</h4>
  <a href="#">Link Button</a>
</div>
<div class="panel" style="display: none;">
  <p>Example Panel</p>
</div>
<!--End panel-->

<div class="flip">
  <h4>Example</h4>
  <a href="#">Link Button</a>
</div>
<div class="panel" style="display: none;">
  <p>Example Panel</p>
</div>
<!--End panel-->

单击子元素而不是父元素时切换

2 个答案: