jquery 在单击时将 li 附加到 ul，然后在第二次单击时删除答案

【问题标题】：jquery append li's to a ul on click and then remove on second clickjquery 在单击时将 li 附加到 ul，然后在第二次单击时删除
【发布时间】：2011-06-08 18:52:37
【问题描述】：

我想使用 a 标签来触发从 ul 中附加隐藏的 li 项。

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

我基本上得到了隐藏 ul 的 .html()，然后使用 .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>

【问题讨论】：

标签： jquery list append toggle

【解决方案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();

【讨论】：

@patrick dm：这很接近...我不想删除原始列表中的两个。也许我可以为那些原件设置一个类，并在删除之前检查 li 是否有一个类...
@estern：是的，我没有注意到这些。你需要以某种方式保护那些。您也许可以将#myProductsList 分成两个子容器。如果那里总是最多两个，而不是.empty()，您可以使用$("#myProductList").children().slice(2).remove()
我最终做了切片版本。我做了一个长度检查，看看有多少 li 有不同的类，然后是那些被附加的，并将这个长度传递给 .slice()。效果很好。
@estern：那肯定行得通。另一种方法是进行:not() 选择。 $("#myProductList").children(':not(.someClass)').remove()。 jQuery 为我们提供了如此多的选择。 ;o)
@patrick dm：我实际上更喜欢这个。再次感谢。如果可以的话，我会把这个答案加两次:)

【解决方案2】：

提示：

链接事件的更好技术。

<a href="#" class="showProducts" onclick="return false;"></a>

变成：

<a href="javascript://" class="showProducts"></a>

【讨论】：