Question

我正在用相同的类名切换li。当点击一个li时，另一个li会向上滑动。

每个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>

有什么想法吗？

Answer 1

你的代码已经有了一个想法，就像你滑动其他div一样，你可以切换＆＃34; - ＆＃34;

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

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

Answer 2

你有：

$(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/

向上滑动toggleClass

2 个答案: