Question

我有三个div。这是我的代码。

<div class="div1">Div1 Content</div>
<div class="div2">Div2 Content</div>
<div class="div3">Div3 Content</div>

如果div2或div3崩溃，使用jQuery如何扩展div1？

Answer 1

在OP DEMO

发表评论后进行修改

checkForDiv1 = function(){ // function to check the requirement and do things accordingly
    if($('.div.expand').length == 0){ // check for expand class div
        $('.div1').addClass('expand')
    }else{
        $('.div1').removeClass('expand')
    }
};

$('.div').click(function(){
    $(this).toggleClass('expand');
    checkForDiv1(); // check the requirement and do the required
});

checkForDiv1(); // call it to make it initially expanded

如果您希望使用HTML而不修改它，可以提供帮助

DEMO

$('div').click(function(){
    $('div').not($(this)).removeClass('expand'); // you remove class expand from all except the one which is clicked
    $(this).addClass('expand') // add expand class to the one which is clicked
});

CSS

div {
  height:30px; // initial height required for transitions
  transition: all 1s ease // some smooth transitions
}
.expand {
  height: 200px;
  background:red; 
}

Answer 2

我认为这就是你要找的东西。

请检查此Fiddle

<强> HTML

<div id="accordion">
<h3>Div1</h3>
<div><p>Div1 Content</p></div>
<h3>Div2</h3>
<div><p>Div2 Content</p></div>
<h3>Div3</h3>
<div><p>Div3 Content</p></div>
</div>

<强> JS

$(document).ready(function(){
    $( "#accordion" ).accordion({
      collapsible: true
  });

  $('.ui-accordion-header').click(function(){
            if ($("#accordion").find(".ui-accordion-header-active").length == 0 ) {
         $("#accordion").find(".ui-accordion-header").eq(0).click();
      }
  });
});

当第二个div或第三个div使用jquery折叠时展开第一个div

2 个答案: