Question

所以我现在拥有的是多个DIV，其中包含所有单独的UL。里面的LI都设置为显示：none。当点击箭头（fa图标）时，相应的LI应该打开一个切换功能，'fa fa-chevron-down应该'变成'fa fa-chevron-up'现在由于某种原因，我可以'让这个工作正常，任何人都可以帮助我吗？下面使用的HTML：

<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中我将显示设置为none：

ul.filter li{display:none;}

编辑;和当前使用的脚本：

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

所以目前所有的LI都会切换，这显然不是我想要的。

Answer 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是一个有效的演示

在多个UL上切换功能

1 个答案: