jqueryクリックするとulにliが追加され、2回目のクリックで削除されます

Question

ulから非表示のliアイテムを追加するには、aタグを使用します。

私は2つのulを持っています.1つはリストとして表示され、もう1つは隠されています。隠されたulには、ボタンをクリックすると目に見えるリストに追加できるlisがあります。

私は基本的に隠しulの.html（）を取得し、.append（）を使用してそれらを可視リストに追加します。

これはfindとdandyですが、私はリンクをトグルとして扱い、隠れたliをクリックして追加/削除したいと考えています。基本的にそれらを追加または削除します。

リンクを2回目にクリックして削除する方法はありますか？

// 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を使用することができ、クリックイベントに対して複数のハンドラ関数を受け入れ

は、ここに私のjqueryのコードです。

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

クリックごとに機能が切り替わります。 （必要に応じて、二つ以上を渡すことができます。）

---

EDIT：あなたができる...

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

：の代わりに、リスト中の元の2つを保持する

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

Answer 2

ヒント：リンクイベント用

より良い技術。

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

は次のようになります。

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