如何更改當前ul的所有li的類？

我有1 ul與各種類型的李。如何更改當前ul的所有li的類？

<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(){ 不改變類show_campaign它具有類的所有華里hidden_campaign }

來源

2014-02-26 Manish Malviya

基本上要在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

來源

2014-02-26 10:35:44 Sachin

使用：

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

來源

2014-02-26 10:11:19

您可以訪問使用父UL和其子根據您的要求選擇器

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

    });

來源

2014-02-26 10:11:50

您必須使用.closest(),.siblings()和.toggleClass()才能達到您想要的效果。

嘗試，

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

來源

2014-02-26 10:12:08

@Sachin感謝您的編輯。 –

是的，我認爲OP正在尋找切換功能。並且我認爲文本應該在'see more'和'see less''之間切換。如果是這樣的話。 –

@Mr_Green Yeah可能是.. –

如何更改當前ul的所有li的類？

回答

相關問題