SlideUp slideDown | 易学教程

问题

i have this javascript code:

var x="#wrapper"
//var xyz;
$(document).ready(function(){ 
    $("#about").click(function(){
    if (!(x=="#about")){
        $(x).slideUp("slow",function(){
            $("#aboutus").slideDown("slow");
            });

            x="#aboutus";
        }
    });
});
$(document).ready(function(){
    $("#home").click(function(){ 
        if(!(x=="#wrapper")){
        $(x).slideUp("slow", function(){
            $("#wrapper").slideDown("slow");
            });
        dd="#wrapper";
        }
    });
});

with this "menu"

<nav>
    <div class="menu">
        <ul class="ul">
    <h6>
                <li id="home" >Home</li >
                <li id="about">About</li >
                <li >performance</li >
                <li >testimonials</li >
                <li >faqs</li >
                <li >forum</li >
                <li onclick="slideUpDown()">Contact  </li >
            </ul>
        </h6>
    </div>
</nav>

I must use the the li tags as links and when I click the about "link" the home div must slide up slowly and the about div is supposed to come down slowly. please help!

thank you in advance

回答1:

In the last line of your code, set x to #wrapper not dd:

var x="#wrapper"

//var xyz; 
$(document).ready(function(){

    $("#about").click(function(){
        if (!(x=="#about")){
            $(x).slideUp("slow",function(){
                $("#aboutus").slideDown("slow");
            });
            x="#aboutus";
        }
    });

    $("#home").click(function(){ 
        if(!(x=="#wrapper")){
            $(x).slideUp("slow", function(){
                $("#wrapper").slideDown("slow");
            });
            x="#wrapper";
        }

    }); 
});

回答2:

I came on this nice one a while ago. It is simple and works.

function toggleForm(x) {
        if ($('#'+x).is(":hidden")) {
            $('#'+x).slideDown(200);
        } else {
            $('#'+x).slideUp(200);
        }
}

Then to call it ...

onmousedown="javascript:toggleForm('div_ID');

and to not change your URL add this in front on the same call

onclick="return false"

with this, you can use one script to call as many slid operations as you want. The div to be targeted is the one that has its ID in the call.

EDIT: sorry ... Just noted that it is jQuery, but should not affect anything. I used it where other jQuery did not. So does not seem to conflict anywere.

来源：https://stackoverflow.com/questions/16164003/slideup-slidedown

标签

javascript

jquery

slidedown

slideup