附加2个jQuery“单击事件”仅一次

Question

Once I click on the image tag it opens the sidebar and it rotates the arrow to the right and when i click again it closes the sidebar and rotate back the arrow but the function doesn't work anymore after that and this is my problem here....

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

Answer 1

Just use the toggleClass function to add / remove the class "visible":

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

For rotating the image I would recommend you to use CSS3 :

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

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

Answer 2

You likely meant

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

Answer 3

I think, you want something like this

$(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");
        });
    });