jquery добавить li к ul по клику, а затем удалить по второму клику - PullRequest
Новая
       23

jquery добавить li к ul по клику, а затем удалить по второму клику

2 голосов
/ 14 января 2011

Я хотел бы использовать тег для запуска добавления скрытых элементов li с ул.

У меня есть два UL, один из которых отображается в виде списка, а другой скрыт. У скрытого ul есть список, который можно добавить в видимый список, если вы нажмете кнопку.

Я в основном получаю .html () для скрытого ul, а затем использую .append (), чтобы добавить их в видимый список.

Это работает find и dandy, но я хочу рассматривать ссылку как переключатель и добавлять / удалять скрытые li, если они щелкают по ней. В основном добавьте их или удалите их.

Есть идеи как их убрать при втором нажатии на ссылку?

Вот мой код 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>

Ответы [ 2 ]

3 голосов
/ 14 января 2011

Вы можете использовать событие-переключатель , которое принимает несколько функций обработчика для события щелчка. 

$(".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();
2 голосов
/ 14 января 2011

Совет:

Лучшая техника для событий ссылок. 

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

становится: 

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