[英]Toggle class and change size on an element using jQuery
I am trying to have a div change its properties on a click function. 我试图在点击功能上更改其属性div。 Some of the properties I am changing with a call to toggleClass()
which is fine and works great. 我正在通过调用toggleClass()
来改变一些属性,这很好并且效果很好。 However I also want to resize the div based on the size of the viewport. 但是我还想根据视口的大小调整div的大小。 In order to have access to those numbers I am changing the width
and height
with jQuery
. 为了能够访问这些数字,我正在使用jQuery
更改width
和height
。 This command looks like this: 此命令如下所示:
$('.box').click( function() {
$(this).toggleClass('box--grow', 0);
$(this).css('width', w * .9);
$(this).css('height', h * .9);
});
EDIT I want the height
and width
to go back to 100%. 编辑我希望height
和width
回到100%。
I tried using the toggle
class but that caused the entire div to disappear, and this solution doesn't work because when I click the div again the class is removed but the height is the same. 我尝试使用toggle
类,但这导致整个div消失,并且此解决方案不起作用,因为当我再次单击div时,类被删除但高度相同。
I am looking for a way to toggle this or to get the viewport width within the css
. 我正在寻找一种方法来切换这个或获得css
的视口宽度。 I tried both approaches but couldn't get anything to what I am looking for. 我尝试了两种方法,但无法得到任何我正在寻找的东西。
why not using CSS VH and VW values? 为什么不使用CSS VH和VW值?
CSS: CSS:
.my90Class{
width: 90vw;
height: 90vh;
}
JS: JS:
$('.box').click( function() {
$(this).toggleClass("my90Class");
});
You need to get the window size first, and then put everything into combined .ready()
and .resize()
functions, to make it responsive. 您需要先获取窗口大小,然后将所有内容放入组合的.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);
You can check for the class with: 您可以通过以下方式检查班级:
$(this).hasClass('box--grow')
Then to remove the class: 然后删除该类:
$(this).removeClass('box--grow');
And to add it back again: 并再次添加:
$(this).addClass('box--grow');
The end would look like this save the original width and height before the event so you can add it back again: 结尾看起来像这样在事件之前保存原始宽度和高度,因此您可以再次添加它:
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');
}
});
untested but it would probably work 未经测试但可能会有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.