Question

我想切换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上。

再次，非常感谢！

Answer 1

尝试这种方式：

// 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 () { });
    }
});

Answer 2

这就是我解决这个问题的方法：

plnkr http://plnkr.co/edit/PcE2hxY4q98Trw90ztnL?p=preview

HTML：

<div class="view" data-page="contentPage.html">
  <div class="actions">
    <label><input type="checkbox"> Toggle View</label>
  </div>
  <div class="content"></div>
</div>

<div class="view" data-page="other.html">
  <div class="actions">
    <label><input type="checkbox"> Toggle View</label>
  </div>
  <div class="content"></div>
</div>

使用Javascript：

$(function() {
  $(".view").each(function(){
    var page = $(this).data("page")
    $(this).find(".content").load(page, function(){
        $(this).animate({height: 40});
      });
  })
  $(".actions input").click(function() {
    if ($(this).is(":checked")) {
       $(this).parent().parent().siblings(".content").animate({height: 300});
    }else
   {
      $(this).parent().parent().siblings(".content").animate({height: 40});
    }
  });
});

如何在打开状态期间切换div并将内容加载到div中？

2 个答案: