Question

我有1个不同类别的李。

<ul class="" style="margin: 0 0 0 5px;">
    <li>
        <aclass="cam_title">
        Couple Watches</a>
    </li>
    <li>
        <a class="cam_title">
        Titan Men's Watches</a>
    </li>
    <li>
        <a class="cam_title">
        Timex Men</a>
    </li>
    <li class="hidden_camaign" style="display:none;">
        <a>Casio Men</a>
    </li><li class="hidden_camaign" style="display:none;">
        <a>Casio women</a>
    </li><li class="hidden_camaign" style="display:none;">
        <a>Casio unisex</a>
    </li>
    <li><a class="see_more" href="javascript">See more</a></li> 
</ul>

我想$( '.see_more' ).click(function(){ 将类更改为具有class hidden_campaign的所有li的show_campaign }

Answer 1

您必须使用.closest()，.siblings()和.toggleClass()来实现您的目标。

尝试，

 $( '.see_more' ).click(function(){ 
   $(this).closest('li').siblings('.hidden_camaign').toggleClass('hidden_camaign show_campaign');
 });

Answer 2

使用：

$('.see_more' ).click(function(){ 
   $(this).closest('ul').find('.hidden_camaign').removeClass('hidden_camaign').addClass('show_campaign ');
});

Answer 3

基本上你想在jQuery中切换效果。因此最好使用slideToggle函数，它也可以为您提供平滑的过渡效果。除了您还想要更改链接的文本。这是解决方案。

$('.see_more').click(function () {
   var btn = $(this);
   $(this).closest('li').siblings('.hidden_camaign').slideToggle('slow', function () {
      if ($(this).is(':visible')) {
         $(btn).text('See Less');
      }
      else {
         $(btn).text('See more');
      }
   })
});

<强> Js Fiddle Demo

Answer 4

您可以使用父ul及其子选择器来满足您的要求

$( '.see_more' ).click(function(){
    $(this).parent("ul").find("li.hidden_camaign").addClass("show_camaign").removeClass("hidden_camaign");

    });

如何更改当前ul的所有li的类？

4 个答案: