javascript - js问题，进来看看吧，还有别的方法么。我的方法有点笨

Question

js 是这样

这个类名是让箭头旋转的
html这样
点击一次的样式
再点一次

因为给它已经加了“fa-flip-vertical”这个类名，所以是向上的，，，js写的太笨，，，求大神指导

对应的四个盒子

两个都出现了

Answer 1

$(".invest-p1").click(function(){
    $(this).children("i").toggleClass("fa-flip-vertical")
});

功能完整点的：

var $content = $("p.invest-s");
$(".invest-nav").delegate(">", "click", function () {
    $(this).parent().find("i.fa-flip-vertical").removeClass("fa-flip-vertical");
    $(this).children("i").toggleClass("fa-flip-vertical");
    $content.hide().eq($(this).index()).show();
});

Answer 2

css的话用:active，
jq的话用toggleClass

Answer 3

其实这种需求，可以借鉴 bootstrap 的 dropdown 组件的思路。

点击 dropdown button 来控制 dropdown-menu 的显示和隐藏，他的做法是在父节点添加或删除 open， 而不是直接控制 dropdown-menu 的显示和隐藏。

同理，推荐你在 invest-p1 节点添加或删除 active 来控制状态，这样做的好处：

1. 可以控制所有子节点在 active 状态的样式，而不仅限于某一个子节点

2. 用js控制会更简单

3. 写样式也会更加清晰、方便维护

一个简单的js例子：

$('.invert-nav').on('click', '.invest-p1', function(e) {
    var $t = $(this);
    
    $t.toggleClass('active').siblings('.active').removeClass('active');
})

以scss为例：

.invert-p1{
    .fa{
        color: #bbb;
    }
    &.active{
        .fa{
            color: #006741;
        }
        // 这里还可以有其他子节点的样式
    }
}

这只是一种解决问题的思路，具体项目可以有多方面的衡量。