javascript - 单击单个元素时的不同效果

Question

当我单击具有 .show_nav 类的元素时，我希望另一个具有 id #FW_Logo 的元素获得 0.5< 的不透明度。当我再次单击它时，它的不透明度应该为 1。

我该怎么做？

这是我目前所拥有的:

$('.show_nav').click(function() {
    $('.level1').toggle(500);
    if (clicked != 1) {
        $('#FW_Logo').css("opacity", "0.5");
        var clicked = 1;
    }
    else if (clicked == 1) {
        $('#FW_Logo').css("opacity", "1")
        var clicked = 0;
    }
});

Answer 1

最简单的方法是创建样式为 opacity: 1; 的类(如果它是初始状态使用 opacity: 0.5;)并在你的元素上触发它.

例如:

CSS

.clicked {
  opacity: 1;
}

JS(使用 jQuery)

$(".show_nav").on('click', function() {
    $('#FW_Logo').toggleClass("clicked");
};