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到點擊然後再刪除第二次點擊

回答

相關問題