jQuery切換/垂直滑塊效果與多個Div

其實，我是jQuery的新手，我正在寫一個帶有jQuery功能的示例頁面。在這個頁面中，我正在使用切換功能。請幫助我獲得預期的效果。我正在嘗試獲取它，但它無法正常工作。我試圖應用的效果是;jQuery切換/垂直滑塊效果與多個Div

頁面上有2個按鈕，比如Button1和Button2。
有2個Divs，比如Div1和Div2。
最初，兩個Div都是隱藏的，只有2個按鈕可見。
如果按鈕1被點擊，Div1應該被切換下來，反之亦然。
如果Div1處於打開狀態並單擊Button2，則Div1應稍微上升，Div2應下降。

我已經寫了一些應用了CSS的代碼。但是我沒有得到滑動效果，因爲它只有一個Div。

我寫了Javascript as;

var IsPanelDown = false; 
var IsPanel2Down = false; 

$(document).ready(function() { 

// Expand Panel 
$("#open").click(function(){ 
if (IsPanel2Down == false) 
{ 
    $("div#panel2").slideUp("slow"); 
    IsPanel2Down = false; 
} 
    $("div#panel").slideDown("slow"); 
    IsPanelDown = true; 
}); 

// Collapse Panel 
$("#close").click(function(){ 
    $("div#panel").slideUp("slow"); 
    IsPanelDown = false; 
}); 

// Switch buttons from "Log In | Register" to "Close Panel" on click 
$("#toggle a").click(function() { 
    $("#toggle a").toggle(); 
}); 

    $("#toggle2 a").click(function() { 
    $("#toggle2 a").toggle(); 
}); 

$("#open1").click(function(){ 
if(IsPanelDown == false) 
{ 

    $("div#panel").slideUp("slow"); 
    IsPanelDown = false; 
} 
    $("div#panel2").slideDown("slow"); 
    IsPanel2Down = true; 
}); 

// Collapse Panel 
$("#close1").click(function(){ 
    $("div#panel2").slideUp("slow"); 
    IsPanel2Down = false; 
}); 
});

來源

2009-12-02 Vijay Balkawade

我正在尋找類似的東西，但有多個Divs。 http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ – 2009-12-02 16:03:17

我也是像新的一樣，你是jQuery的，但我想如果你使用live屬性它會幫助你，就像這樣：

$("#toggle a").live('click', function() { $(this).functionName(); });

來源

2009-12-02 15:51:35 Luci

效果基本show /控制了slideDown知名度，而不是定位。使用CSS或文檔結構來控制兩個DIV可見時的相對位置。

來源

2009-12-02 15:52:57 tvanfosson

這不是測試，但嘗試這樣的事情

<div id="toggle_holder"> 
    <div class="toggle"></div> 
    <div class="toggle"></div> 
</div> 
<div id="button_wrapper"> 
    <button>button 1</button> 
    <button>button 2</button> 
</div> 
<script type="text/javascript"> 
    // jquery already loaded... 
    $(document).ready(function(){ 
    $('#button_wrapper button').click(function(){ 
     $('button', $(this).parent()).slideUp('slow'); 
     $(this).stop().slideDown('slow'); 
    }); 
    }); 
</script>

來源

2009-12-02 16:04:23 hubbl

假設你有類似的標記，以這樣的：

<button id="button1">Toggle Div1</button> 
<button id="button2">Toggle Div2</button> 

<div class="container" id="div1">Content in DIV 1</div> 
<div class="container" id="div2">Content in DIV 2</div>

然後使用jQuery這樣的：

$('button').click(function(e) { 
    // get the ID of the button so we can work out which DIV to show 
    var m = $(this), 
     id = m.attr('id').replace('button', ''); // should be either "1" or "2" after this 

    // hide the DIV that's visible, if any 
    $('.container:visible').slideUp('fast'); 

    // slide the one we want down 
    $('#div' + id).slideDown('fast'); 
});

有有很多方法可以做到這一點 - 這取決於你的標記！

來源

2011-07-23 10:43:21 Alex

jQuery切換/垂直滑塊效果與多個Div

回答

相關問題