Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/delphi/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery-如果其他元素可见,则更改元素高度_Javascript_Jquery_If Statement_Resize_Visible - Fatal编程技术网

Javascript jQuery-如果其他元素可见,则更改元素高度

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>

我有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>

    <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;
       }