Question

我有一些java脚本在导航菜单后面工作，用户单击导航按钮，一些AJAX触发并引入一些HTML，我想要的是如果再次点击相同的链接然后加载的内容通过该特定按钮从标记中删除。

有没有人有想法？我的代码目前位于

$("#Blog").click(function (ev) {
        ev.preventDefault()
           var url = $(this).attr("href");
            $.ajax ({
                url: "index.php/home/category",
                type: "GET",
                success : function (html) {
            //alert("Success");
                    $("#accordion").append(html);
                }
            });
        });

Answer 1

尝试使用.toggle代替.click：

这将允许您添加第二个功能，该功能会在再次单击该按钮时删除内容。

 $("#Blog").toggle(function (ev) {
    ev.preventDefault();
    var url = $(this).attr("href");
    $.ajax ({
       url: "index.php/home/category",
       type: "GET",
       success : function (html) {
             //alert("Success");
             $("#accordion").append(html);
          }
       });
    },
    function (ev) {
       // remove content from accordion here
    });

Answer 2

$("#Blog").click(function (ev) {
        ev.preventDefault();

在preventDefault之后缺少逗号。

Answer 3

所以我不知道jQuery足以以这种方式回答，但为什么不使用简单的布尔开关呢？

// Pseudo:
If clicked and the switch is false, show the HTML, and set the Switch to True

If clicked and the switch is true, hide the HTML, and set the Switch to False

那应该可以解决问题。

以下代码可能非常错误，但我会用它来解释我的想法：

//Global Variables
var switch = false;

//Function
if(!switch)
{
     $("#Blog").click(function (ev) {
        ev.preventDefault()
           var url = $(this).attr("href");
            $.ajax ({
                url: "index.php/home/category",
                type: "GET",
                success : function (html) {
                //alert("Success");
                    $("#accordion").append(html);
                }
            });
        });

    switch = true;
}
else
{
    $("#accordion").innerHTML = "";
    switch = false;
}

Answer 4

$("#accordion").append(
    $("<div class='AJAXContend' />").append(html)
);

然后你可以轻松地$('.AJAXContend').remove();。

另一种选择是做$('#accordion :last-child').remove();，但这有点蠢。

删除javascript创建的内容

4 个答案: