Question

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();
        jQuery(".link").click(function()
        {
          jQuery("div.content").slideToggle(500);
        });;
    });
</script>

如何仅展开链接到特定链接的div？

编辑：它像这样做了

<div class="comment">
   <div class="bar">
      <a class="link">#</a>
    </div>
</div>
<div class="content">
  <div class="comment">
   <div class="bar">
      <a class="link">#</a>
    </div>
  </div>
</div>

Answer 1

编辑2：

您更改了HTML。现在这样做：

jQuery(this).closest('div.comment').next('div.content').slideToggle(500);

但是等等！现在，您有两个与div.link元素不同的.content元素。这是您的实际 HTML标记吗？

你也可以这样做：

jQuery(this).closest('div.content').slideToggle(500);

请提供您的实际HTML。

修改

根据更新的问题，请执行以下操作：

jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);

如何仅展开链接到特定链接的div？

他们是如何联系的？

如果div是后代，请执行以下操作：

jQuery(this).find('div.content').slideToggle(500);

如果div是祖先，请执行以下操作：

jQuery(this).closest('div.content').slideToggle(500);

如果div是下一个兄弟，请执行以下操作：

jQuery(this).next().slideToggle(500);

如果div是上一个兄弟，请执行以下操作：

jQuery(this).prev().slideToggle(500);

~~如果没有看到您的HTML结构，我们只能猜测解决方案。~~

Answer 2

对于这个HTML：

<div class="blaat1">
   <div class="blaat1">
      <a class="link">#</a>
    </div>
   <div class="blaat2">
      <a class="link">#</a>
    </div
</div>
<div class="content">
  <div class="otherdivs">
      <div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
      <div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
  </div>
</div>

使用此JS：

<script type="text/javascript">
    $(document).ready(function() {
        $(".content").hide();
        $(".link").click(function() {
          var blaat = $(this).parent().attr("class");

          $(blaat+"_div").slideToggle(500);
        });;
    });
</script>

我没有测试过，但它应该有用。

Answer 3

试试这个：

$(".link").click(function(){
    $(this).parents('div.content').slideToggle(500);
});;

Jquery div扩展了页面上的所有div

3 个答案: