jquery append李的ul到点击然后再删除第二次点击

我想使用一个标签来触发从ul中附加隐藏的li项目。jquery append李的ul到点击然后再删除第二次点击

我有两个uls，一个是可见的列表，另一个是隐藏的。隐藏的ul有可以添加到可见列表中的lis，如果你点击一个按钮。

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

这个作品找到和丹迪，但我想把一个链接作为切换和附加/删除隐藏的李如果他们点击它。基本上添加或删除它们。

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

这里是我的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>

来源

2011-01-13 estern

您可以使用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();

来源

2011-01-13 21:07:34 user113716

@patrick DM：这是关闭...我不想删除在原始列表中的两项。也许我可以给这些原稿设置一堂课，并在我删除它之前检查李有没有上课... – estern 2011-01-13 21:10:09

提示：

链路事件更好的技术。

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

变为：

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

来源

2011-01-13 21:08:44

jquery append李的ul到点击然后再删除第二次点击

回答

相关问题