隐藏两个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()圈外，以防止从每一次结合。