Question

我是jQuery的新手，我正在尝试更改两个元素的样式

第一个使display:none和另一个元素取opacity:1

当我的第三个元素样式发生变化时。这是我的代码，但它不起作用。

是什么原因？

$(document).ready(function(){
   if ($(".about").css("width") == "100%") { 
       $('.logo').css({"display":"none"});
       $('.headerleftpart img').css({"opacity":"1"});
   }
   else {
       $('.logo').css({"display":"block"});
       $('.headerleftpart img').css({"opacity":"0"});
  }
});

Answer 1

检查此fiddle

    $(".dropdown-menu a").click(function() {
    $(this).closest(".dropdown-menu").toggle();
});

HTML

$(document).ready(function () {
var width = $('.about').width();
var parentWidth = $('.about').offsetParent().width();
var percent = 100*width/parentWidth;
console.log(percent);
if (percent == "100") {
    $('.logo').css({
        "display": "none"
    });
    $('.headerleftpart img').css({
        "opacity": "1"
    });
} else {
    $('.logo').css({
        "display": "block"
    });
    $('.headerleftpart img').css({
        "opacity": "0"
    });
}
});

Answer 2

您正在使用$(document).ready，这意味着您的代码只执行一次。

如果您在调整元素大小时总是想要更改样式，则应使用$(".about").resize。

请参阅jQuery API Documentation。

如果 - 在jQuery中使用Else语句和元素样式

2 个答案: