开发者

Jquery .toggle() with first element open

开发者 https://www.devze.com 2023-04-11 19:08 出处:网络
So I am using .toggle() to open and close a bunch of divs, but I made the first div open on page load. The problem lies where, if a user click on that div to toggle it closed, it takes two clicks, the

So I am using .toggle() to open and close a bunch of divs, but I made the first div open on page load. The problem lies where, if a user click on that div to toggle it closed, it takes two clicks, the first click seems to try to toggle it open again. How should I handle this?

$(document).ready(function(){
    $('.content_accrd').css({"height":"0px"});
    $('.content_accrd:eq(0)').css({"height":"100px"});
    $('.paneltop:eq(0)').css({"background-position":"0px -21px"})
$('.paneltop').toggle( function() {
    $(this).css({"background-position":"0px -21px"})
    .siblings('.content_accrd').animate({"height":"100px"}, 200)
}, function() {
$(this).css({"background-position":"0px 0px"})
    .siblings('.content_accrd').animate({"height":"0px"}, 200);

})
})

markup:

 <div id="panel1" class="panel">
                <h2 class="panel_title">Capad Clients</h2>
                <div class="paneltop">
                </div>
              <div class="content_accrd">
              <p>
text
              </p>
              </div>
          </div>

          <div id="panel1" class="panel">
                <div class="paneltop">
                </div>
              <div class="content_accrd">
              <p>
              text
              </p>
              </div>
          </div>


          <div id="panel1" class="panel">
                <div class="paneltop">
    开发者_StackOverflow中文版            </div>
              <div class="content_accrd">
              <p>
text
              </p>
              </div>
          </div>


Example

EDIT:

$(document).ready(function() {
    $('.content_accrd').css({
        "height": "0px"
    });
    $('.content_accrd:eq(0)').css({
        "height": "100px"
    });
    $('.paneltop:eq(0)').css({
        "background-position": "0px -21px"
    })
    $('.paneltop').click(function() {
        if ($(this).siblings('.content_accrd').height() != 100) {
            $(this).css({
                "background-position": "0px -21px"
            }).siblings('.content_accrd').animate({
                "height": "100px"
            }, 200)
        } else {
            $(this).css({
                "background-position": "0px 0px"
            }).siblings('.content_accrd').animate({
                "height": "0px"
            }, 200);
        }
    })
})
0

精彩评论

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

关注公众号