使用if语句的Javascript onclick函数
我左侧有导航菜单。在汉堡包图标上，单击菜单关闭（向左），右侧的内容占据屏幕的整个宽度。在汉堡包再次点击我正试图设置像以前一样的内容填充。
HTML
<div class="dash dash-fw" onclick="padding()">
<span class="hamburger display-inlineblock hamburger-menu is-active" id="hamburger-1">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</span>
</div>
div id="mySidenav" class="sidenav">
<div class="poppins font-weight-500 menu-title text-upper">Meni</div>
</div>
<div class="container-menu" id="auto-dash"></div>
JS
$(document).ready( function(){
$('.dash').click(function(keyframes, options) {
var toggleWidth = $("#mySidenav").width() == 0 ? "250px" : "0px";
$('#mySidenav').animate({width: toggleWidth}, 500, );
});
});
function padding() {
var compare = document.getElementById("mySidenav").style.width;
var comparemax = document.getElementById("mySidenav").style.width = "250px";
if (compare = comparemax ) {
document.getElementById("auto-dash").style.paddingLeft = "30px";
document.getElementById("auto-dash").style.transition = "all 1s ease-in-out";
}
else {
document.getElementById("auto-dash").style.paddingLeft = "280px";
document.getElementById("auto-dash").style.transition = "all 1s ease-in-out";
}
}
问题是if语句在click上工作（填充从280px到30px）但我无法弄清楚为什么在第二次点击（填充不会从30px回到280px） 示例： http ：//coderthemes.com/greeva/vertical/default/index.html 内容全宽，然后返回汉堡包图标点击。这就是我想要实现的目标。
回答 2
Stack Overflow用户
发布于 2018-08-29 12:09:36
你的if条件应该是，If（compare == comparemax）你所写的是赋值运算符而不是条件运算符。
您的第一个变量“compare”也会占用宽度值，您再次将同一元素的宽度分配给250px，有时Javascript也会将其分配给变量compare。现在发生的事情是比较和comparemax将始终相等。好吧，我不确定这是不是确切的情况，但我很少遇到这样的问题，我不知道为什么会这样。替代解决方案可以直接在if语句中评估比较值为250px，并执行相关操作。如果要将sidenav宽度设置为250px，则可以在if else语句结束后执行此操作。
Stack Overflow用户
发布于 2018-08-29 13:11:26
在javascript =中用于赋值和/ ==或===用于比较。此外，comparemax应该是一个String，而不是一个Boolean。var comparemax = document.getElementById("mySidenav").style.width = "250px";将分配comparemax一个true或false基于是否值#mySidenav的style width属性被设置为250px（检查此的jsfiddle：http://jsfiddle.net/rw3ux9md/）。您需要使用document.getElementById("mySidenav").offsetWidth的，而不是document.getElementById("mySidenav").style.width因为你没有设置width的#mySidenav与CSS。以下代码应该工作：
function padding() {
var compare = document.getElementById("mySidenav").offsetWidth;
var comparemax = "250px";
if (compare == comparemax ) {
document.getElementById("auto-dash").style.paddingLeft = "30px";
document.getElementById("auto-dash").style.transition = "all 1s ease-in-out";
}
else {
document.getElementById("auto-dash").style.paddingLeft = "280px";
document.getElementById("auto-dash").style.transition = "all 1s ease-in-out";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dash dash-fw" onclick="padding()" style="border: 1px solid black">
<span class="hamburger display-inlineblock hamburger-menu is-active" id="hamburger-1">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</span>
</div>
<div id="mySidenav" class="sidenav" style="border: 1px solid black">
<div class="poppins font-weight-500 menu-title text-upper">Meni</div>
</div>
<div class="container-menu" id="auto-dash"></div>
<script>
$(document).ready( function(){
$('.dash').click(function(keyframes, options) {
var toggleWidth = $("#mySidenav").width() == 0 ? "250px" : "0px";
$('#mySidenav').animate({width: toggleWidth}, 500, );
});
});
function padding() {
var compare = document.getElementById("mySidenav").offsetWidth+"px";
console.log(compare);
var comparemax = "250px";
if (compare == comparemax ) {
document.getElementById("auto-dash").style.paddingLeft = "30px";
document.getElementById("auto-dash").style.transition = "all 1s ease-in-out";
console.log("Equal");
}
else {
document.getElementById("auto-dash").style.paddingLeft = "280px";
document.getElementById("auto-dash").style.transition = "all 1s ease-in-out";
console.log("Not equal");
}
}
</script>https://stackoverflow.com/questions/-100002479
复制相似问题