Javascript jQuery-如果其他元素可见,则更改元素高度
我有3个按钮可以切换3个div。当我单击link1时,div1 fadeIn等。。 我的目标是,如果这些div中的任何一个淡入淡出,则调整map_画布的大小;如果没有可见的淡出淡出,则调整为默认值Javascript jQuery-如果其他元素可见,则更改元素高度,javascript,jquery,if-statement,resize,visible,Javascript,Jquery,If Statement,Resize,Visible,我有3个按钮可以切换3个div。当我单击link1时,div1 fadeIn等。。 我的目标是,如果这些div中的任何一个淡入淡出,则调整map_画布的大小;如果没有可见的淡出淡出,则调整为默认值 <a id="link1"></a> <a id="link2"></a> <a id="link3"></a> <div id="map_canvas"></div>
<a id="link1"></a>
<a id="link2"></a>
<a id="link3"></a>
<div id="map_canvas"></div>
<div id="wrapper">
<div id="div1" class="hideMe"></div>
<div id="div2" class="hideMe"></div>
<div id="div3" class="hideMe"></div>
</div>
据我所知,我实现了一个示例。我只做了前两个按钮,您可以使用前两个按钮作为示例来实现第三个按钮 注意:可以合并jQuery,这样就只有一次单击功能,但是在学习它的同时,保持它的分离是很有帮助的,这样它就更容易理解了 HTML CSS 小提琴可以在这里找到
请显示您的代码啊,添加您的jQuery代码。非常感谢。很好用!
$(document).ready(function() {
$('#div1').hide();
$('a#link1').click(function() {
if (!$('#div1').is(':visible'))
{
$('.hideMe').fadeOut("slow");
$('#map_canvas').animate({height:"370px"}, 500);
}
$('#div1').fadeToggle("slow");
});
<a id="link1">link1</a>
<a id="link2">link2</a>
<a id="link3">link3</a>
<div id="map_canvas"></div>
<div id="wrapper">
<div id="div1" class="hideMe">div1</div>
<div id="div2" class="hideMe">div2</div>
<div id="div3" class="hideMe">div3</div>
$(document).ready(function() {
$('.hideMe').hide();
$('#link1').click(function() {
$('.hideMe').not('#div1').hide();
$('#div1').fadeToggle("slow",function(){
if ($('#div1').is(':visible'))
{
$('#map_canvas').animate({height:"370px"}, 500);
}
if(!$('.hideMe').is(':visible')){
$('#map_canvas').animate({height:"0px"}, 500);
}
});
});
$('#link2').click(function() {
$('.hideMe').not('#div2').hide();
$('#div2').fadeToggle("slow",function(){
if ($('#div2').is(':visible'))
{
$('#map_canvas').animate({height:"370px"}, 500);
}
if(!$('.hideMe').is(':visible')){
$('#map_canvas').animate({height:"0px"}, 500);
}
});
});
});
#map_canvas {
border: 1px solid black;
}
a {
cursor:pointer;
}