[英]Toggle class and change size on an element using jQuery
我试图在点击功能上更改其属性div。 我正在通过调用toggleClass()
来改变一些属性,这很好并且效果很好。 但是我还想根据视口的大小调整div的大小。 为了能够访问这些数字,我正在使用jQuery
更改width
和height
。 此命令如下所示:
$('.box').click( function() {
$(this).toggleClass('box--grow', 0);
$(this).css('width', w * .9);
$(this).css('height', h * .9);
});
编辑我希望height
和width
回到100%。
我尝试使用toggle
类,但这导致整个div消失,并且此解决方案不起作用,因为当我再次单击div时,类被删除但高度相同。
我正在寻找一种方法来切换这个或获得css
的视口宽度。 我尝试了两种方法,但无法得到任何我正在寻找的东西。
为什么不使用CSS VH和VW值?
CSS:
.my90Class{
width: 90vw;
height: 90vh;
}
JS:
$('.box').click( function() {
$(this).toggleClass("my90Class");
});
您需要先获取窗口大小,然后将所有内容放入组合的.ready()
和.resize()
函数中,以使其响应。
function myfunction() {
var w = $(window).width();
var h = $(window).height();
$('.box').click(function () {
if ($(this).hasClass('box--grow')) {
$(this).removeClass('box--grow');
$(this).css({
'width': '',
'height': ''
});
} else {
$(this).addClass('box--grow');
$(this).css({
'width': w * .9,
'height': h * .9
});
}
});
}
$(document).ready(myfunction);
$(window).on('resize', myfunction);
您可以通过以下方式检查班级:
$(this).hasClass('box--grow')
然后删除该类:
$(this).removeClass('box--grow');
并再次添加:
$(this).addClass('box--grow');
结尾看起来像这样在事件之前保存原始宽度和高度,因此您可以再次添加它:
var oldwidth = $('.box').css('width');
var oldheight = $('.box').css('height');
$('.box').click( function() {
if($(this).hasClass('box--grow')) {
$(this).removeClass('box--grow');
$('.box').css('width', oldwidth);
$('.box').css('height', oldheight);
} else {
$(this).addClass('box--grow');
}
});
未经测试但可能会有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.