Question

我想使用Jquery动态添加规则到现有类，但在用户单击按钮之前不会将其归因于HTML元素。

我试过了：

$('.show-toggle').css("max-height", width * 0.5);

如How to add property to existing class中所述，但我认为它不起作用，因为该课程一开始并不活跃。

HTML

<div id ="toggler"></div>
<div id = "toogle" class="hide-toggle">

CSS

.hide-toggle {
display:none
}

.show-toggle {
display : block;
}

JS（使用Jquery）

$('#toggler').click(function () {

var width = $(window).width();
$('.show-toggle').css("max-height", width * 0.5);
$("#toggle").toggleClass('hide-toggle').toggleClass('show-toggle');

});

Answer 1

将.css（）放在.toggleClass（）之后：

$(document).ready(function(){
    $("#toggler").click(function(){
    var width = $(window).width();
    $("#toggle").toggleClass("hide-toggle, show-toggle");
    $(".show-toggle").css("max-height", width*0.5);
  });
});

因此，在#toggle具有.show-toggle类之后，可以执行CSS的更改。因为当没有带有类.show-toggle的元素时，jQuery无法在类.show-toggle上执行.css（）

小提琴：https://jsfiddle.net/p15rcmn4/4/

使用Jquery规则动态添加到现有类

1 个答案: