附加2个jQuery“点击事件”只能工作一次

时间：2016-08-19 14:41:40

标签： javascript jquery html css frontend

一旦我点击图片标签，它就会打开侧边栏，它会向右旋转箭头，当我再次点击它会关闭侧边栏并向后旋转箭头但是此功能在此之后不再有效，这是我的这里有问题...... 

$(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>

3 个答案:

答案 0 :(得分：3)

只需使用 toggleClass 功能添加/删除“可见”类：

    $(document).ready(function(){
        $("img").on("click", function(){
            $('#right-panel').toggleClass("visible");
        });
    });

要旋转图像，我建议您使用 CSS3 ：

.visible img {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);

  -webkit-transition: transform 300ms ease;
  transition: transform 300ms ease;
}

答案 1 :(得分：0)

你可能意味着

$("img").on("click", function() {
  $('#right-panel').toggleClass("visible");
  $('#leftarrow').rotate({
    animateTo: $('#right-panel').hasClass("visible") ? 180 : 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="http://www.valencia.org/images/leftArrow.png" id="leftarrow" height="32"/>

  <!-- 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>

答案 2 :(得分：0)

我想，你想要这样的东西

$(document).ready(function(){

        $("img").on("click", function(){

            var
            rotate = 0;

            if (!$('#right-panel').hasClass("visible")) {

                rotate = 180;
            }

            $('#leftarrow').rotate({animateTo: rotate});
            $('#right-panel').toggleClass("visible");
        });
    });
相关问题
最新问题