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

jQuery - change element height if other element becomes visible

本文关键字：元素 高度 如果 其他 jQuery      更新时间：2023-09-26

我有 3 个按钮可以切换 Fade（） 3 个div。当我点击 #link1 时，div1 fadeIn（） 等等。我的目标是如果这些div中的任何一个被淡入，则调整#map_canvas的大小，如果没有可见的div，则调整为默认值（fadeOut（））。

    <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 of fadeIn 和 fadeOut。

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

我所能理解，我实现了一个示例。 我只做了前两个按钮，你可以用前两个按钮作为例子来实现第三个按钮。

注意：可以合并jQuery，以便只有一键式功能，但是在学习时，将其分开很有帮助，因此更容易理解。

.HTML

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

Javascript/Jquery

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

.CSS

       #map_canvas {
        border: 1px solid black;
       }
       a {
           cursor:pointer;
       }

小提琴可以在这里找到

http://jsfiddle.net/qYys7/

相关文章：