Question

我想使用一个标签触发从ul。

追加隐藏的li项目

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

我基本上得到了隐藏ul的.html（），然后使用.append（）将它们添加到可见列表中。

这适用于查找和花花公子，但我想将一个链接视为一个切换，并附加/删除隐藏的li，如果他们点击它。基本上添加或删除它们。

关于如何在链接上第二次点击删除它们的任何想法？

这是我的jquery代码：

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

HTML code：

<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();

Answer 2

提示：

更好的链接事件技术。

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

变为：

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

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

2 个答案: