我的页面左侧有一个 div，右侧有一个 div。我希望两者都能动画到“隐藏”和“显示”位置，如侧边菜单。我设法让一个人像这样工作:
$(document).ready(function () {
$(".header-tab").click(function () {
if ($(".header").position().left == 0) {
$(".header").animate({left:'-150px'}, "slow");
$(".header-tab").animate({left:'0'}, "slow");
} else {
$(".header").animate({left:'0'}, "slow");
$(".header-tab").animate({left:'150px'}, "slow");
}
});
});
但我这样做是为了让左侧和右侧都工作，并且只有左侧工作:
$(document).ready(function () {
$(".header-tab").click(function () {
if ($(".header").position().left == 0) {
$(".header").animate({left:'-150px'}, "slow");
$(".header-tab").animate({left:'0'}, "slow");
} else {
$(".header").animate({left:'0'}, "slow");
$(".header-tab").animate({left:'150px'}, "slow");
}
});
$(".aside-tab").click(function () {
if ($(".aside").position().right == 0) {
$(".aside").animate({right:'-150px'}, "slow");
$(".aside-tab").animate({right:'0'}, "slow");
} else {
$(".aside").animate({right:'0'}, "slow");
$(".aside-tab").animate({right:'150px'}, "slow");
}
});
});
那么有人可以告诉我在哪里或如何添加第二个点击功能(在旁边)吗？
编辑:
这是 HTML:
<!doctype html>
<html>
<head>
<title>Website Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="header"></div>
<div class="header-tab"></div>
<div class="container"></div>
<div class="aside"></div>
<div class="aside-tab"></div>
</body>
</html>
最佳答案
你的代码有几个问题，首先你有两个 .aside div，点击任何.aside-tab div 你需要指定你想滑动到哪一边。即假设我点击了右边 div.aside-tab 并且点击事件被触发了，因为你有两个 .aside div 这个条件:
if($(".aside").position().right == 0)
看起来会很困惑，它们中的哪个.aside？还有这一行:
$(".aside").animate({right:'-150px'}, "slow");
上面的代码会让他们都动起来？你需要一种方法来知道它是右边的还是左边的，我添加了 id，并且根据 id 的值我知道它是右侧或左侧，我为相应的设置动画。
另外，恕我直言，我不认为这个 aside.position().right 返回一个值，因为我知道它是 .left 或 .top，所以对于右边的，我们将根据全窗口宽度或全窗口宽度 - 150 进行动画处理，这是 .aside
应该是这样的:
$(document).ready(function () {
$(".header-tab").click(function () {
if ($(".header").position().left == 0) {
$(".header").animate({left:'-150px'}, "slow");
$(".header-tab").animate({left:'0'}, "slow");
} else {
$(".header").animate({left:'0'}, "slow");
$(".header-tab").animate({left:'150px'}, "slow");
}
});
$(".aside-tab").click(function () {
var id, aside;
id = $(this).attr('id');
id = id.replace('-btn', '');
aside = $('#' + id + '-side');
if(id == 'left'){
if(aside.position().left == 0){
aside.animate({left:'-150px'}, "slow");
} else {
aside.animate({left:'0'}, "slow");
}
} else {
var winW = $(window).width();
if(aside.position().left == winW - 150){
aside.animate({left: winW}, "slow");
} else {
aside.animate({left:winW - 150}, "slow");
}
}
});
});body{
padding:0;
margin:0;
overflow-x:hidden;
}
.aside-tab{
width:25px;
height:25px;
display:inline-block;
cursor:pointer;
position:fixed;
top:5px;
z-index:1000;
}
#left-btn{
background-color:tomato;
left:5px;
}
#right-btn{
right:5px;
background-color:green;
}
.aside{
height:100vh;
width:150px;
display:inline-block;
z-index:10;
position:absolute;
top:0;
}
#left-side{
background-color:skyblue;
left:-150px;
}
#right-side{
background-color:orange;
left:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="header"></div>
<div class="header-tab"></div>
<div class="container"></div>
<div id="left-side" class="aside"></div>
<div id="left-btn" class="aside-tab"></div>
<div id="right-side" class="aside"></div>
<div id="right-btn" class="aside-tab"></div>更新:您也可以考虑使用 element.on('click', 而不是 element.click 作为 JCD 中提到的他的回答，不仅是因为 element.off() 方法，还因为使用 element.on() 你可以附加多个事件，假设一个 input type="text" 字段可能就像:
$('#my-input').on('input change blur keypress', function(){...});
这有时很有用。
关于javascript - 我怎样才能在 jQuery 中拥有多个点击功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34617903/