0
一旦我点击图片标签，它会打开侧边栏，它会向右旋转箭头，当我再次单击它时，它会关闭侧边栏并向后旋转箭头，但功能不会“T以后工作了，在这里，这是我的问题....连接2个jQuery“点击事件”只能工作一次
$(document).ready(function() {
$("img").on("click", function() {
$('#right-panel').addClass("visible");
$('#leftarrow').rotate({
animateTo: 180
});
$("img").on("click", function() {
$('#right-panel').removeClass("visible");
$('#leftarrow').rotate({
animateTo: 0
});
});
});
});body {
font-family: "Segoe ui light", san-serif;
color: orange;
margin: 0px;
padding: 0px;
overflow: hidden;
}
h3 {
font-size: 48px;
font-weight: 400;
color: orange !important;
cursor: pointer;
}
.main {
/*border: 1px solid black;*/
}
/* right panel */
#right-panel {
position: absolute;
right: -120px;
top: 0px;
background-color: #f0f0f0;
width: 200px;
height: 100%;
display: block;
margin: 0px;
padding: 0px;
transition: right 0.3s linear;
}
#right-panel.visible {
right: 0px;
transition: right 0.3s linear;
}
/* absence box */
.absence-box {
border-radius: 7px;
background-color: rgb(56, 56, 56);
position: relative;
left: 15px;
top: 50px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
transition: background 1s;
}
.absence-box:active {
background-color: #000;
}
.absence-box:hover {
background-color: #abaaaa;
}
.absence-box p:hover {
color: black;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
}
.absence-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
transition: color 1s;
}
/* presence box */
.presence-box {
border-radius: 7px;
background-color: rgb(67, 204, 196);
position: relative;
left: 15px;
top: 40px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
}
.presence-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 14px;
}
/* Working box */
.working-box {
border-radius: 7px;
background-color: rgb(69, 105, 166);
position: relative;
left: 15px;
top: 30px;
width: 50px;
height: 50px;
z-index: 64;
cursor: pointer;
}
.working-box p {
color: white;
position: relative;
font-size: 34px;
font-family: segoe ui light;
top: 0px;
left: 10px;
}
h6 {
color: gray;
font-size: 12px;
}
.absence-box h6 {
position: relative;
top: -60px;
right: -65px;
}
.presence-box h6 {
position: relative;
top: -60px;
right: -65px;
}
.working-box h6 {
position: relative;
top: -60px;
right: -65px;
white-space: nowrap;
}
img {
cursor: pointer;
position: relative;
top: 20px;
left: 20px;
}
img.leftarrow {
background-image: src('imgs/leftarrow.png');
}
img.rightarrow {
background-image: url("imgs/rightarrow.png");
background-repeat: no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<!-- Right panel -->
<div id="right-panel">
<img src="imgs/leftarrow.png" id="leftarrow" />
<!-- absence box -->
<div class="absence-box">
<p>A</p>
<h6>Absence</h6>
</div>
<!-- presence box -->
<div class="presence-box">
<p>P</p>
<h6>Presence</h6>
</div>
<!-- Working box -->
<div class="working-box">
<p>W</p>
<h6>Working on Order</h6>
</div>
</div>
因为它们同时激发... – epascarello
在一个处理程序中设置你的代码，并对可见类可用性做出决定if（$（'＃right-panel'）。hasClass（'visible'））{...} – Evgeniy
当我修复代码段时，缩进还显示图像的第一次单击指定第二个处理程序 – mplungjan