隱藏兩個DIV並點擊三分之一，然後反轉

Question

點擊後，我的功能隱藏前兩個DIV s並切換第三個DIV。這是行得通的。當我再次點擊相同的鏈接時，該功能切換回第三個DIV，這也起作用。但之前隱藏的兩個DIV現在仍處於隱藏狀態，應該可見。

<div> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> -->CSS style is hidden 
</div> 

$(document).ready(function(){ 
    $("#three").hide(); 
    $(".show_hide").show(); --> this shows my click link 

    $('.show_hide').click(function(){ 
     $("#three").slideToggle().load('testpage.php'); 
       $("#one").hide(); 
       $("#two").hide(); 
    }) 
}); 

Answer 1

改變了...

$("#one").hide(); 
$("#two").hide(); 

這個...

$("#one").toggle(); 
$("#two").toggle(); 

或本...

$("#one,#two").toggle(); 

或這個.. 。

$(this).siblings().toggle(); 

Answer 2

你可以這樣做： JSFiddle

HTML：

<div> 
    <div id="one">hi</div> 
    <div id="two">hello</div> 
    <div id="three">again</div> 
</div> 
<a class="show_hide">Show/Hide</a> 

的Javascript：

$(document).ready(function(){ 
    $("#three").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
     $("#three").slideToggle().load('testpage.php'); 
       $("#one").slideToggle(); 
       $("#two").slideToggle(); 
    }) 
}); 

Answer 3

$(document).ready(function(){ 

    $("#three").hide().load('testpage.php'); 

    $(".show_hide").show().click(function(){ 
     $("#one").toggle(); 
     $("#two").toggle(); 
     $("#three").slideToggle(); 
    }) 

}); 

我做了什麼：

1）將.show_hide上的函數合併到鏈中。

2）改變了hide()功能爲toggle()

3）動了你的電話load()圈外，以防止從每一次結合。