Question

当我点击包含课程var area1=document.getElementById("area1"); var area2=document.getElementById("area2"); var regex = /Hello/g; area2.innerHTML = area1.innerHTML.split(regex) .join('<span style="color:red;">Hello</span><span style="color:green;">') + '</span>';的元素时，我想要另一个ID为.show_nav的元素，以获得#FW_Logo的不透明度。当我再次点击它时，它的不透明度应为0.5。

我该怎么做？

这是我到目前为止所做的：

Answer 1

创建具有样式opacity: 0.5;的类的最简单方法（如果它是初始状态使用.clicked { opacity: 1; }）并且仅在元素上对其进行处理。

例如：

CSS

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

JS（使用jQuery）

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

/* Keep list elements floated so they do not collapse */
.navbar-nav>li.top-nav {
  float: left;
}
/* keep the ul floated to the right */
.top-nav-right {
  float: right!important;
}


.navbar .navbar-nav {
  display: inline-block;
  float: none;
  color: #000000;
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar-default {
  background-color: #44B5DB;
  border-color: #000000;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li      > a:focus {
  background-color: #FFFFFF;
  color: #000000;
}

.navbar-default .navbar-nav > li > a {
  color: #000000;
}

Answer 2

无需设置变量，只需使用toggleClass。

创建一个CSS类来设置opactiy。

.dim {
        opacity: 0.5
    }

然后切换课程。

$('.show_nav').on("click", function() {
    $("div").toggleClass("dim");
});

Answer 3

试试这个：

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

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

3 个答案: