javascript - 隐藏/显示而不刷新，将 onclick 更改为切换

Question

非常简单的问题...而且是一个基本问题(这一天太长了!)。

此时，单击“更新/查看客户端”会将 php 文件加载到页面上，而无需刷新。这很棒，但是最简单的方法是什么，以便单击相同的 anchor 标记更像切换(显示/隐藏)？

jQuery:

 $("#searchClient").bind("click", function() {

              $("#search").load("inc/search.php?r=clients")

         });

HTML:

<a href="#" id="searchClient"><h3>Update / View Existing Client</h3></a>
<div id="search"></div>

我不想要任何花哨的滑动，只是简单地弹出来。非常感谢!

Answer 1

假设#search 是隐藏的:

$("#searchClient").bind("click", function() {
    var $search = $("#search");

    if ($search.is(':hidden')) {
        $search.load("inc/search.php?r=clients", function () {
            $search.show();
        });
    } else {
        $search.hide();
    }
});

否则您可以跟踪它是否已加载:

$("#searchClient").bind("click", function() {
    var $search = $("#search");

    if ($search.is(':hidden')
        || $search.data('loaded') == undefined) {
        $search.load("inc/search.php?r=clients", function () {
            $search
                .data('loaded', true)
                .show();
        });
    } else {
        $search.hide();
    }
});