我想打开一个div,将页面加载到该div,然后将其关闭。

我想通过多个链接来做到这一点。

<div id="main-nav">
            <div id="menu-container">
            <div id="menu">
            <ul>
                <li><a href="home.html"></a></li>
                <li id="clicklink"><a href="#">mission</a></li>
                <li><a href="#">leadership</a></li>
                <li><a href="#">awards</a></li>
                <li><a href="#">sustainability</a></li>
                <li><a href="#">faq</a></li>
            </ul>
            </div>
            <div id="clickme3">
                <img src="images/logo-sm.png">
            </div>

            </div>
            <div id="content-load">

            </div>
    </div>

$("#clicklink").toggle(function () {
    $("#main-nav").animate({
        height: "300",
    }, 1000, function () {
        $("#content-load").load("contentpage.html", function () {

        })
        function () {
            $("#main-nav").animate({
                height: "40",
            }, 1000, )
        };
    });
});


这就是我所无法使用的。

我可以使它正常工作,但是当然不会切换。

$("#clicklink").click(function () {
    $("#main-nav").animate({
        height: "300",
    }, 1000, function () {
        $("#content-load").load("contentpage.html", function () {

        })
    });
});


我是jQuery的新手,但渴望学习。有没有办法让我切换?

You can view production here http://billygoforth/learning/CMD


您会看到它向上移动了底部导航(这是我想要的)并在下面加载了外部页面内容(也是我想要的),但是我想要它,因此如果再次单击链接,它会折叠,然后我可以将此jquery放在其他链接ID上。

再次非常感谢!

最佳答案

尝试这种方式:

// global variable
var toggleHeight = $('#main-nav').height();
$("#clicklink").click(function () {
    if(toggleHeight <= 0){
       $("#main-nav").animate({
           height: "300px",
       }, 1000, function () {
           $("#content-load").load("contentpage.html");
       });
    }
    else{
       $("#main-nav").animate({
           height: "0px",
       }, 1000, function () { });
    }
});

08-06 01:59
查看更多