我有三个div。这是我的代码。
<div class="div1">Div1 Content</div>
<div class="div2">Div2 Content</div>
<div class="div3">Div3 Content</div>
如果div2或div3崩溃,使用jQuery如何扩展div1?
答案 0 :(得分: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而不修改它,可以提供帮助
$('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;
}
答案 1 :(得分:1)
我认为这就是你要找的东西。
请检查此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();
}
});
});