2014-10-30 59 views
0

我使用相同的類名來切換li。當一個li被點擊打開時,另一個li就會滑動。toggleClass上滑動

每個li在它旁邊都有一個加號,當點擊li時,單擊以展開加號,將類fa-plus切換爲fa-minus成爲減號。

但是,當打開的li自動向上滑動,因爲另一個li被點擊時,圖標保持爲減號不會變回加。

這裏是我的jsfiddle:http://jsfiddle.net/a3mn8yoo/

<script> 
$(function() { 

    $(".has_submenu a").click(function() { 
     $(".has_submenu a").not(this).next().slideUp(); 
     $(this).closest(".has_submenu").find(".refinement-submenu").slideToggle(); 
     $(this).closest(".has_submenu").find(".fa-plus, .fa-minus").toggleClass('fa-plus fa-minus'); 
     return false; 
    }); 

}); 


</script> 

<style> 
.has_submenu .refinement-submenu {display:none;} 
</style> 


<ul> 
    <li class="has_submenu"> 
     <a href="#">Refine by 1 <i class="fa fa-plus"></i></a> 
     <ul class="refinement-submenu"> 
      <li><a href="">Silverstone</a></li> 
      <li><a href="">Prestwold Hall</a></li> 
     </ul> 
    </li> 
    <li class="has_submenu"> 
     <a href="#">Refine by 2 <i class="fa fa-plus"></i></a> 
     <ul class="refinement-submenu"> 
      <li><a href="">£25</a></li> 
      <li><a href="">£50</a></li> 
     </ul> 
    </li> 
    <li class="has_submenu"> 
     <a href="#">Refine by 3 <i class="fa fa-plus"></i></a> 
     <ul class="refinement-submenu"> 
      <li><a href="">London</a></li> 
      <li><a href="">South West</a></li> 
     </ul> 
    </li>  
</ul> 

任何想法?

回答

1

您的代碼舉行的想法已經在你效果基本show其他的div類似的方式,你可以切換 「 - 」

$(".has_submenu a").not(this).find(" .fa-minus").toggleClass('fa-plus fa-minus'); 

http://jsfiddle.net/a3mn8yoo/1/

0

您有:

$(this).closest(".has_submenu").find(".fa-plus, .fa-minus"); 

我補充:

$(this).closest(".has_submenu").find(".fa-plus, .fa-minus").end().siblings().find('.fa-minus').toggleClass('fa-plus fa-minus'); 

試試更新提示:

http://jsfiddle.net/a3mn8yoo/6/