Question

我有以下设置。我想在点击expanded链接时切换expander div。我只想直接在链接旁边展开div。我怎么能这样做？

<a class="expander" href="#"><?php echo get_the_title($post->ID); ?></a>
<div class="expanded">
    content here
</div>

<a class="expander" href="#"><?php echo get_the_title($post->ID); ?></a>
<div class="expanded">
    content here
</div>

<a class="expander" href="#"><?php echo get_the_title($post->ID); ?></a>
<div class="expanded">
    content here
</div>

这是我的jquery：

$('.expander').click(function() {
    event.preventDefault();
    $(this).siblings('expanded').toggle();
});

Answer 1

使用next而不是兄弟姐妹。这是解决方案：

$('.expander').click(function(event) {
    event.preventDefault();
    $(this).next('expanded').toggle();
});

Answer 2

请改用next。我认为这应该有效：

$('.expander').click(function() {
    $(this).next('.expanded').first().toggle();
});

http://api.jquery.com/next/

Answer 3

简答：

您可以使用.next() jquery方法：所以你的jquery看起来像：

$(this).next().toggle();

请注意。由于下一个仅获取“下一个元素”，因此无需.first()方法调用。

来自文档：

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟姐妹只有匹配那个选择器。

所以这只会选择下一个兄弟元素。

<强>演示：

$('.expander').click(function(){
  $(this).next().toggle();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="expander" href="#">press 1</a>
<div class="expanded">
    content here 1
</div>

<a class="expander" href="#">press 2</a>
<div class="expanded">
    content here 2
</div>

<a class="expander" href="#">press 3</a>
<div class="expanded">
    content here 3
</div>

Answer 4

我使用切换可见性而不是切换显示来创建它：

＆＃13;

$(function() {
  $('.expander').click(function() {
    event.preventDefault();
    //call the function toggleVisibility
    toggleVisibility(this);
  });
});

function toggleVisibility(obj) {
  //declare a variable to get visibility of element
  //with class expanded
  var vis = $(obj).next().css('visibility');
  //return the visibility, if is hidden return visible to toggle
  return $(obj).next().css('visibility', vis === 'hidden' ? 'visible' : 'hidden');
}

＆＃13;

.expanded {
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="expander" href="#">id</a>

<div class="expanded">content here</div>
<a class="expander" href="#">id</a>

<div class="expanded">content here</div>
<a class="expander" href="#">id</a>

<div class="expanded">content here</div>

＆＃13;

单击时切换下一个隐藏的div

4 个答案: