Question

所以我使用.toggle（）来打开和关闭一堆div，但是我在页面加载时打开了第一个div。问题在于，如果用户单击该div以将其切换为关闭，则需要两次单击，第一次单击似乎尝试再次将其切换为打开状态。我该怎么办呢？

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

})
})

标记：

 <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">
                </div>
              <div class="content_accrd">
              <p>
text
              </p>
              </div>
          </div>

Answer 1

Example

编辑：

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

第一个元素打开的Jquery .toggle（）

1 个答案: