开发者

Jquery div expands all divs on page

开发者 https://www.devze.com 2023-03-05 20:07 出处:网络
<script type=\"text/javascript\"> jQuery(document).ready(function() { jQuery(\".content\").hide();
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();
        jQuery(".link").click(function()
        {
          jQuery("div.content").slideToggle(500);
        });;
    });
开发者_如何学C</script>

How to expand only the div which is linked to the specific link?

Edit: Its done like this

<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>


EDIT 2:

You changed your HTML. Now do this:

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

But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?

You could also do this:

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

Please provide your actual HTML.


EDIT:

Based on updated question, do this:

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

How to expand only the div which is linked to the specific link?

How are they linked?

If the div is a descendant, do this:

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

If the div is a an ancestor, do this:

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

If the div is the next sibling, do this:

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

If the div is the previous sibling, do this:

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

Without seeing your HTML structure, we can only guess at the solution.


For this 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>

Use this JS:

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

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

I haven't tested that, but it should work.


Try this:

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

精彩评论

暂无评论...
验证码 换一张
取 消