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 - 如果其他元素變得可見，則更改元素高度

回答

相關問題