1 
<div class="panels">
    <div>
        <h2>
        Test
        </h2>
    </div>
    <div class="inner_panel statict">
         Test2
    </div>
</div>

我希望当人们点击测试时，会出现 Test2。如果没有，他们看不到 Test2，我怎样才能使用 jquery 做到这一点？

我尝试了以下但它不起作用。

 $('.inner_panel').hide();

  $('.panels').click(function () {
    $(this).closest('div .inner_panel').toggle();
  });

我在文件中有多个带有类面板的 div，所以我不想点击测试影响其他“面板”。

4

3 回答 3

1

closest方法在 DOM 树中查找，而不是向下查找。你可以在这里查看。http://api.jquery.com/closest/

也许你应该使用.children('div.inner_panel')来获取你的元素。children方法允许您获取元素，这些元素位于 DOM 的下一层。检查http://api.jquery.com/children/详细信息。

于 2012-07-30T23:20:42.670 回答
0 
 $('.inner_panel').hide();

 // Within .panels get the div's which contain an H2
 var containers = $('.panels h2').closest("div");

 // make them clickable
 containers.click(function () {
    // For the clicked panel, get the next element div which 
    // has the inner_panel class
    $(this).next('div.inner_panel').toggle();
 });
于 2012-07-30T23:41:26.270 回答
0

你有一个额外的空间->$(this).closest('div .inner_panel').toggle();

这应该是：$(this).closest('div.inner_panel').toggle();

但是.closest()对你不起作用，因为它沿着 DOM 树向上传播，而不是向上然后向下传递到兄弟姐妹等。

我会这样做：

$('.inner_panel').hide();

$('.panels').click(function () {
  $(this).find('div.inner_panel').toggle();
});

见jsbin 演示

于 2012-07-30T23:15:35.417 回答