[英]Toggle Element width using jQuery
I have hamburger and menu on the left side, which has width: 0px;
我左边有汉堡包和菜单,
width: 0px;
How can I do after click on hamburger menu changes width to 250px
, and second click change width to 0px
? 单击汉堡菜单后,如何将宽度更改为
250px
,然后再单击更改宽度为0px
?
var hamburger = $('.hamburger-menu__list').css('width');
$('.hamburger-toggle').click(function(){
$(this).toggleClass('open');
if (hamburger == '0' ) {
$('.hamburger-menu__list').css('width', 250);
}
else {
$('.hamburger-menu__list').css('width', 0);
};
});
This will work. 这会奏效。 You have to check hamburger width everytime.
你必须每次都检查汉堡包的宽度。
$('.hamburger-toggle').click(function(){
var hamburger = $('.hamburger-menu__list').css('width');
$(this).toggleClass('open');
if (hamburger == '0' ) {
$('.hamburger-menu__list').css('width', 250);
}
else {
$('.hamburger-menu__list').css('width', 0);
};
});
You can still cache element
but access width every time click
is invoked. 每次调用
click
您仍然可以缓存element
但访问宽度。
Another suggestion is to use ternary-operator
as this is ideal use case to use it. 另一个建议是使用
ternary-operator
因为这是使用它的理想用例。
var hamburger = $('.hamburger-menu__list'); $('.hamburger-toggle').click(function() { $(this).toggleClass('open'); var hamburgerWidth = hamburger.css('width'); $('.hamburger-menu__list').css('width', hamburgerWidth == '0' ? 250 : 0); });
You need to check the width every time you click on the button, also you need to parseInt the width to get a right number, css('width')
returns the value with prefix px
eg 250px
so parseInt will remove the prefix and returns pure number, Try this: 每次单击按钮时都需要检查宽度,还需要解析宽度以获得正确的数字,
css('width')
返回前缀为px
的值,例如250px
因此parseInt将删除前缀并返回pure数字,试试这个:
$('.hamburger-toggle').click(function(){
var hamburgerWidth = parseInt($('.hamburger-menu__list').css('width'));
$(this).toggleClass('open');
if (hamburgerWidth === 0) {
$('.hamburger-menu__list').css('width', 250);
} else {
$('.hamburger-menu__list').css('width', 0);
};
});
var $hamburger = $('.hamburger-menu__list').css('width'), $hamburgerToggle = $('.hamburger-toggle'), isOpen = false; function toggleMenu() { isOpen = !isOpen; $hamburgerToggle.toggleClass('open', isOpen); $hamburger.width(isOpen ? 250 : 0); } $hamburgerToggle.click(toggleMenu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You are doing DOM manipulation. 你在做DOM操作。 It is bad practice to relay on this, because it is asynchronous.
继电器就是不好的做法,因为它是异步的。 A state variable (
isOpen
) helps to have only one source for the state (single source of truth). 状态变量(
isOpen
)有助于只有一个状态源(单个事实来源)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.