Question

我试图在单击锚点时显示div，问题是锚点在元素内部，而需要显示的div在此元素之外。页面上有多个同一类的div，所以我只想显示相关的一个。

标记是：

<div class="wrapper">
  <div class="trigger">
    <a href="#" class="change">Change</a>
  </div>
  <div class="content">
    <p>Content to be shown when Change is clicked</p>
  </div>
</div>

Answer 1

这就是你想要做的吗？（fiddle）

// dom ready
$(function() {
  $('a.change').on('click', function() {
    // wrapper div
    $(this).parent()
        .next() // .content div
        .show();
    return false; // prevent the link to be followed
  });
});

Answer 2

使用jQuery，你可以这样做：

$('a.change').click(function(e) {
    e.preventDefault();
    $(this).parent().next().toggle();
});

<强> jsFiddle example

Answer 3

到达父母并获得正确的div，例如

$('a.change').click(function(event){
    event.preventDefault();
    $(this).parents('.wrapper').children('.content').show()
}

通过这种方式，您无需担心嵌入锚的深度，或与锚相关的内容（之前，之后）的位置

添加了一个jsFiddle，显示了具有不同结构的div，使用相同的代码

http://jsfiddle.net/NWqcq/11/

Answer 4

这是你的意思吗？

$(".content").hide();
$("a.change").click(function(){    
      $(".content",$(this).closest(".wrapper")).show();
});

现场演示：

http://jsfiddle.net/dfkge/

当元素在触发器之外时，Javascript的问题显示

4 个答案: