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

我有3个按钮toggleFade（）3个div。当我点击＃链接1，div1 fadeIn（）等等。我的目标是调整#map_canvas的大小，如果这些div中的任何一个淡入，并调整到默认情况下，如果没有可见（fadeOut（））。jQuery - 如果其他元素变得可见，则更改元素高度

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

编辑：fadeIn和fadeOut的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"); 

    });

来源

2013-10-03 Joviceva Konoba

显示您的代码请 – SarathSprakash

是的，添加您的jQuery代码。 – Trevor

@Trevor here ;;; –

就像我能理解的那样，我实现了一个例子。我只做了前两个按钮，可以使用前两个按钮作为示例来实现第三个按钮。

注意：它可能巩固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/

来源

2013-10-03 20:15:36 Trevor

非常感谢。完美的作品！ –

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

回答

相关问题