Question

点击后，我的功能会隐藏前两个DIV并切换第三个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()呼叫移出循环，以防止每次绑定。

隐藏两个DIV并在点击时切换第三个，然后反转

3 个答案: