javascript - 当元素在触发器之外时，Javascript 出现问题

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

那是你想做的吗？（小提琴）

// 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 示例

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();
});

现场演示：​</p>

http://jsfiddle.net/dfkge/