jquery 클릭시 ul에 li을 추가 한 후 두 번째 클릭시 제거하십시오

ul에서 숨겨진 li 항목을 추가하려면 a 태그를 사용하고 싶습니다.jquery 클릭시 ul에 li을 추가 한 후 두 번째 클릭시 제거하십시오

나는 두 개의 uls를 가지고 있는데 하나는 목록으로 표시되고 다른 하나는 숨겨져 있습니다. 숨겨진 ul에는 버튼을 클릭하면 보이는 목록에 추가 할 수있는 목록이 있습니다.

기본적으로 숨겨진 ul에 대한 .html()을 얻은 다음 .append()를 사용하여 표시 목록에 추가합니다.

이 검색 및 멋쟁이 작동하지만 링크를 토글로 처리하고 숨겨진 된 li '그것을 클릭하면 추가/제거 싶어요. 기본적으로 추가하거나 제거하십시오.

링크를 두 번째 클릭 할 때 제거하는 방법에 대한 아이디어가 있으십니까?

// 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을 사용할 수, 클릭 이벤트에 대해 여러 핸들러 함수를 허용

여기 내 jQuery 코드입니다.

$(".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

@estern : 아, 그렇습니다. 어떻게 든 보호해야합니다. 아마도 # myProductsList를 두 개의 하위 컨테이너로 나눌 수 있습니다. 거기에 항상 최대 2 개가 있다면'.empty() '대신'$ ("myProductList")를 사용할 수 있습니다 children(). 슬라이스 (2) .remove()' – user113716

도와 주셔서 감사합니다 – estern

팁 : 링크 이벤트에 대한

더 나은 기술.

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

가된다 :

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

출처

2011-01-13 21:08:44

jquery 클릭시 ul에 li을 추가 한 후 두 번째 클릭시 제거하십시오

답변

관련 문제