jquery присоединить li к ul на клик, а затем удалить второй щелчок

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

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

Я в основном получаю .html() для скрытой ul, а затем используйте .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'); 
});

Он будет переключаться между функциями при каждом нажатии. (Вы могли бы пройти более двух, если это необходимо.)

EDIT: Чтобы сохранить первоначальный два в списке, вместо:

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

... вы могли бы сделать:

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

источник

2011-01-13 21:07:34 user113716

@patrick дм: Это близко ... я не хочу, чтобы удалить два, которые были в первоначальном списке. Возможно, я мог бы просто установить класс для этих оригиналов и проверить, есть ли у класса li до его удаления ... – estern

@ western: Ах да, я этого не заметил. Вам нужно как-то защитить их. Вы могли бы разделить '# myProductsList' на два подконтейнера. Если есть всегда максимум два, вместо '.empty()' вы могли бы использовать '$ (" # myProductList "). Children(). Slice (2) .remove()' – user113716

ok За вашу помощь – estern

Совет:

лучший метод для событий связи.

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

становится:

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

источник

2011-01-13 21:08:44

jquery присоединить li к ul на клик, а затем удалить второй щелчок

ответ

Смежные вопросы