Question

我正在尝试使用链接将wordpress页面中的内容加载到自定义模板上的div中。

我有一个隐藏的div，当内容加载到幻灯片中时，应该使用slideDown显示。

我有几个指向不同页面的链接，我希望通过onClick或类似内容将其加载到这个div中。

例：

  可以说我有以下链接：
- 链接1（主页）
- 链接2（约）
- 链接3（联系方式）

如果访问者点击这些链接会发生以下情况：

点击链接2 - ＆gt;加载到div - ＆gt;使用slideDown显示div   或类似的。

点击链接3 - ＆gt;以前加载的内容淡出和链接的内容   <2>淡出

点击链接2（再次） - ＆gt;通过单击og link 2 ...
执行类似的操作
点击链接1 - ＆gt;清除div并通过slideUp或类似方法隐藏它。

如果链接2或3处于活动状态，并且用户再次点击相同的链接 - ＆gt;   与点击链接1
类似的操作

我找到了一些代码可以帮助我，但我还没到那里。
这是我到目前为止所拥有的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

function toggleSlider() {
    if ($("#maincontent").is(":visible")) {
        $("#sec-content").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#maincontent").slideUp();
            }
        );
    }
    else {
        $("#maincontent").slideDown(600, function(){
            $("#sec-content").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

</script>

我在SO上的相关帖子中找到了此代码，这使我可以使用slideUp / slide / down功能将内容加载到div中。
但它通过点击链接3（在示例中）关闭div，所以我将再次单击该链接以再次加载它。
主链接Link 1不能满足我的需求。

希望对此有更多了解的人可以帮助我。在这里是否可以做到？

谢谢！

----编辑代码02/08/13 ----

<script type="text/javascript">

$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

var lastData;
$(function () {
    $("a").click(function(event) {
        loadData($(this).attr("href"));
        event.preventDefault();
    });
});

function loadData(data) {
    if(lastData == data) {
        $("#maincontent").slideUp();
    } else {
        $("#maincontent").html(data);
        $("#maincontent").slideDown();
    }
    lastData = data;
}

</script>

结果可以在http://tobba.org/no

看到

Answer 1

您可以尝试使用以下功能：单击链接时，查看是否是最后一个链接。如果是这样，那么slideUp（）。如果没有，那么获取数据进入那里，然后一旦数据可用，填写框和slideDown。

这个例子可能让你半途而废，你仍然需要使用$ .get或$ .load来获取你想要的数据。注意：lastData在函数范围之外声明，以便在函数结束时不会丢失其值： http://jsfiddle.net/turiyag/9na6K/

function loadData(data) {
    if(lastData == data) {
        $("#dataview").slideUp();
    } else {
        $("#dataview").html(data);
        $("#dataview").slideDown();
    }
    lastData = data;
}

使用jQuery在slideUp / slideDown中加载div中的帖子

1 个答案: