jquery 在单击时将 li append 到 ul，然后在第二次单击时删除

Question

我想使用 a 标签来触发从 ul append 隐藏的 li 项目。

我有两个 ul，一个作为列表可见，另一个隐藏。隐藏的 ul 具有列表，如果您单击按钮，可以将其添加到可见列表中。

我基本上获取隐藏 ul 的 .html()，然后使用 .append() 将它们添加到可见列表中。

这可以找到和花花公子，但我想将 a 链接视为切换，并在单击它时 append/删除隐藏的 li。基本上添加它们或删除它们。

关于如何在第二次点击链接时删除它们有什么想法吗？

这是我的 jquery 代码:

// Add Related Products
$(".showProducts").click( function(){
    var moreProductsItems = $(".moreRelatedProducts").html();
    $("#myProductList").append(moreProductsItems);
    $(".showProducts").toggleClass('hideProducts');
});

HTML 代码:

<a href="#" class="showProducts" onclick="return false;"></a>
<ul class="moreRelatedProducts" style="display:none;">
    <li>Product Name</li>
    <li>Product Name</li>
    <li>Product Name</li>
    <li>Product Name</li>
    <li>Product Name</li>
    <li>Product Name</li>
    <li>Product Name</li>
 </ul>

 <div class="listBoxContainer2">
     <ul id="myProductList">
           <li>Product Name</li>
           <li>Product Name</li>
     </ul>
 </div>

Answer 1

您可以使用the toggle-event ，它接受点击事件的多个处理函数。

$(".showProducts").toggle( function(){
    var moreProductsItems = $(".moreRelatedProducts").html();
    $("#myProductList").append(moreProductsItems);
    $(".showProducts").toggleClass('hideProducts');
}, function() {
    $("#myProductList").empty();
    $(".showProducts").toggleClass('hideProducts');
});

每次点击都会切换功能。 (如果需要，您可以传递两个以上。)

<小时/>

编辑:保留列表中原来的两个，而不是:

$("#myProductList").empty();

...你可以这样做:

$("#myProductList").children().slice(2).remove();