我正在尝试学习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>
https://jsfiddle.net/3wrwsp3z/
我希望有人知道发生了什么以及我做错了什么。
由于
答案 0 :(得分：0)
尝试将条件更改为<=。我不知道为什么，但是修好了。
但我仍然不知道为什么它不能在JSFiddle中工作。