我正在尝试学习jQuery，因为它显然很容易。考虑到我对HTML和CSS有足够的了解，我决定尝试模仿windows 10的cortana左侧菜单，但在一个网站上。
首先我实现了标签脚本，然后打开点击脚本，然后关闭点击菜单脚本。在那之前一切都很好，除了我决定让它对手机友好，所以我必须让菜单的宽度是百分比。我隐藏了带有left属性的菜单，因为它是固定位置的。这也意味着我必须处理脚本中的左值(至少，我认为通过CSS是不可能的)。百分比不太管用)。
我把左改变属性脚本在窗口调整大小函数，所以它只在窗口大小改变时触发。我把它放在一个条件中，所以它只在菜单未打开时触发。调整大小的工作，它被触发，但它总是触发当调整大小发生时，无论菜单是否打开，我不知道为什么会发生这种情况，或者我做错了什么。
这是一个JSFiddle(由于某些原因，set left属性脚本在那里不起作用，但在Chrome和Firefox上不起作用):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
</head>
<body>
<style>
.menu {
width:60%;
background:rgba(125, 125, 125, 0.89);
position:fixed;
height:100%;
box-sizing: border-box;
transition:0.5s;
}
html,body {
margin:0;
padding:0;
height:100%;
}
#wrap {
width:100%;
height:100%;
}
.menu-tabs {
display:block;
width:55px;
float:right;
height:100%;
padding:0 3px;
box-sizing: border-box;
transition:0.5s;
}
.menu-tabs > div {
display:block;
width:100%;
height:45px;
margin: 5px 0;
background:rgba(0, 0, 0, 0.43);
transition:0.2s;
}
.menu-tabs:hover {
background:rgba(0, 0, 0, 0.43)!important;
}
.menu-tabs > div:hover {
background:rgba(0, 102, 255, 0.46);
}
.menu-content > div {
display:none;
overflow:auto;
padding:20px;
height:100%;
box-sizing: border-box;
}
</style>
<div class="menu">
<div class="menu-tabs">
<div href="#1tab"></div>
<div href="#2tab"></div>
<div href="#3tab"></div>
<div href="#4tab"></div>
</div>
<div class="menu-content">
<div id="1tab">First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab contentFirst tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab contentFirst</div>
<div id="2tab">Second tab content First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content First tab content
First tab content First tab content First tab content First tab content</div>
<div id="3tab">Third tab content</div>
<div id="4tab">Fourth tab content</div>
</div>
</div>
<div id="wrap">"asdadasd
asdadasdas
datasd
asdadasdasd
asdadasdasda
sd</div>
<script>
$(function(){
var menuWidth = $(".menu").width();
var menuTabsWidth = $(".menu-tabs").width();
$(".menu").css({left:'-' + (menuWidth - menuTabsWidth - 6)});
$(window).resize(function() {
var menuWidth = $(".menu").width();
var menuTabsWidth = $(".menu-tabs").width();
if ($(".menu").css('left')!= '0') {
$(".menu").css({left:'-' + ($(".menu").width() - $(".menu-tabs").width() - 6)});
}
return;
});
$("#wrap").click(function(){
var menuWidth = $(".menu").width();
var menuTabsWidth = $(".menu-tabs").width();
$(".menu").css({left:'-' + (menuWidth - menuTabsWidth - 6)});
$(".menu-tabs").css({background:''});
$(".menu-tabs > div").css({background:''});
});
$(".menu-tabs > div").click(function(){
if ($(".menu").css('left')!= '') {
$(".menu").css({left:0});
$(".menu-tabs").css({background:'rgba(0, 0, 0, 0.43)'});
}
$(".menu-tabs > div").css({background:''});
$(this).css({background:'rgb(0, 102, 255)'});
$(".menu-content > div").hide();
$($(this).attr('href')).fadeIn();
});
});
</script>
</body>
我希望每个人都知道发生了什么，我做错了什么。
谢谢
我尝试将条件更改为<=。我不知道为什么，但这解决了它。
我仍然不知道为什么它不工作在JSFiddle，虽然