在多個UL上切換功能

所以我目前所擁有的是多個DIV，其中包含所有單獨的UL。裏面的LI都設置爲顯示：無。當點擊箭頭（fa圖標）時，相應的LI應該打開一個切換功能，並且'fa fa-chevron-down should'應該變成'fa fa-chevron-up'現在由於某種原因，我可以'讓這個工作正常，任何人都可以幫助我？ HTML下面使用：在多個UL上切換功能

<div class="filter-col"> 
    <div class="filter size clearfix"> 
     <b>Size <i class="fa fa-chevron-down pull-right"></i></b> 
     <ul class="filter Size"> 
      <li> 
       5 
      </li> 
     </ul> 
     </div> 

    <div class="filter width clearfix"> 
     <b>Width <i class="fa fa-chevron-down pull-right"></i></b> 
     <ul class="filter width"> 
      <li> 
       3E 
      </li> 
      <li> 
       D 
      </li> 
      <li> 
       E 
      </li> 
     </ul> 
    </div> 

    <div class="filter style clearfix"> 
     <b>Style <i class="fa fa-chevron-down pull-right"></i></b> 
     <ul class="filter style"> 
      <li> 
       Shoes 
      </li> 
      <li> 
       Sandals 
      </li> 
      <li> 
       Boots 
      </li> 
     </ul> 
    </div>

而且在我設置顯示沒有CSS：

ul.filter li{display:none;}

編輯;和腳本目前正在使用：

<script> 
    $(document).ready(function(){ 
     $(".fa").click(function(){ 
      $("ul.filter li").slideToggle("slow"); 
     }); 
    }); 
</script>

所以目前所有的LI的將切換，這是不是我想要的效果顯着。

來源

2015-12-08 Stefan Neuenschwander

你能還包括你的JavaScript或jQuery代碼試過嗎？ –

添加了代碼，但我不認爲它確實有用 –

您的代碼不會像您想要的那樣將圖標從下往上更改。也沒有什麼可以證明你正在改變'display：none'。 –

-1

這裏是展示li的，當你點擊fa-chevron-down圖標的功能：

$(".fa-chevron-down").click(function(e){ 
    $(e.target).removeClass('fa-chevron-down'); 
    $(e.target).addClass('fa-chevron-up'); 
    $(e.target).parent().find('li').slideToggle("slow"); 
    $(e.target).parent().find('li').css('display' ,'list-item'); 
});

以上，e是點擊事件本身。

而對於相反的作用：

$(".fa-chevron-up").click(function(e){ 
    $(e.target).removeClass('fa-chevron-up'); 
    $(e.target).addClass('fa-chevron-down'); 
    $(e.target).parent().find('li').slideToggle("slow"); 
    $(e.target).parent().find('li').css('display' ,'none'); 
});

我建議尋找到的API文檔here和here

This是一個工作演示

來源

2015-12-08 19:15:50

感謝您的幫助。但是，每次點擊都會觸發切換，而V形圖標只會改變一次。 –

我編輯了我的答案。 –

在多個UL上切換功能

回答

相關問題