单击时如何使箭头旋转？

Question

 $(document).ready(function () { $('.slideout-menu-toggle').on('click', function(event){ event.preventDefault(); // create menu variables var slideoutMenu = $('.slideout-menu'); var slideoutMenuWidth = $('.slideout-menu').width(); // toggle open class slideoutMenu.toggleClass("open"); // slide menu if (slideoutMenu.hasClass("open")) { slideoutMenu.animate({ left: "0px" }, 1000); } else { slideoutMenu.animate({ left: -slideoutMenuWidth }, 1000); } }); }); $(document).ready(function () { $('.slideout-menu li').click( function() { $(this).children('.mobile-sub-menu').toggle("slow"); }); }); 

 .slideout-menu { position: absolute; top: 100px; left: -9999px; width: 100%; background: rgb(248, 248, 248); z-index: 1; } .slideout-menu .slideout-menu-toggle { position: absolute; top: 12px; right: 10px; display: inline-block; padding: 6px 9px 5px; font-family: Arial, sans-serif; font-weight: bold; line-height: 1; background: #222; color: #999; text-decoration: none; vertical-align: top; } .slideout-menu .slideout-menu-toggle:hover { color: #fff; } .slideout-menu ul { list-style: none; font-weight: 300; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .slideout-menu ul li { /*border-top: 1px solid #dddddd;*/ border-bottom: 1px solid #dddddd; } .slideout-menu ul li a { position: relative; display: block; padding: 10px; color: #999; text-decoration: none; } .slideout-menu ul li a:hover { background: #aaaaaa; color: #fff; } .slideout-menu ul li ai { position: absolute; top: 15px; right: 10px; opacity: .5; } .slideout-menu .mobile-sub-menu { display:none; } .mobile-sub-menu li:last-child { border-bottom:none; } .mobile-sub-menu { } .slideout-menu ul { margin-bottom:0; border-bottom:0; } .mobile-sub-menu li{ padding-left:10px; background-color: #ffffff; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="slideout-menu"> <ul> <li><a href="#">SUPPORT<i class="fa fa-arrow-right"></i></a> <ul class="mobile-sub-menu"> <li><a href="#">Title1</a></li> <li><a href="#">Title2</a></li> <li><a href="#">Title3</a></li> </ul> </li> <li><a href="#">EDIT BOOK<i class="fa fa-arrow-right"></i></a> <ul class="mobile-sub-menu"> <li><a href="#">NEW</a></li> <li><a href="#">BROWSE</a></li> <li><a href="#">APPROVAL</a></li> </ul> </li> </ul> </div> <button type="button" class="navbar-toggle slideout-menu-toggle" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 

The sub-item will pop-out when I click on main item. There is a arrow icon on main item, What can I do to make it rotate when I click on it?

For example, the arrow is point to right, when I click on it the sub-item will show and arrow icon will point down.

Answer 1

Toggle a class active when the li is clicked:

$('.slideout-menu li').click(function() {
    $(this).children('.mobile-sub-menu').toggle("slow");
    $(this).toggleClass('active'); // add this
});

Then add this to your CSS:

.slideout-menu li .fa-arrow-right {
    transition: transform 0.4s linear;
}
.slideout-menu li.active .fa-arrow-right {
    transform: rotate(90deg);
}

Full demo snippet:

 $(document).ready(function() { $('.slideout-menu-toggle').on('click', function(event) { event.preventDefault(); // create menu variables var slideoutMenu = $('.slideout-menu'); var slideoutMenuWidth = $('.slideout-menu').width(); // toggle open class slideoutMenu.toggleClass("open"); // slide menu if (slideoutMenu.hasClass("open")) { slideoutMenu.animate({ left: "0px" }, 1000); } else { slideoutMenu.animate({ left: -slideoutMenuWidth }, 1000); } }); $('.slideout-menu li').click(function() { $(this).children('.mobile-sub-menu').toggle("slow"); $(this).toggleClass('active'); }); }); 

 .slideout-menu li .fa-arrow-right { transition: transform 0.4s linear; } .slideout-menu li.active .fa-arrow-right { transform: rotate(90deg); } .slideout-menu { position: absolute; top: 100px; left: -9999px; width: 100%; background: rgb(248, 248, 248); z-index: 1; } .slideout-menu .slideout-menu-toggle { position: absolute; top: 12px; right: 10px; display: inline-block; padding: 6px 9px 5px; font-family: Arial, sans-serif; font-weight: bold; line-height: 1; background: #222; color: #999; text-decoration: none; vertical-align: top; } .slideout-menu .slideout-menu-toggle:hover { color: #fff; } .slideout-menu ul { list-style: none; font-weight: 300; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .slideout-menu ul li { /*border-top: 1px solid #dddddd;*/ border-bottom: 1px solid #dddddd; } .slideout-menu ul li a { position: relative; display: block; padding: 10px; color: #999; text-decoration: none; } .slideout-menu ul li a:hover { background: #aaaaaa; color: #fff; } .slideout-menu ul li ai { position: absolute; top: 15px; right: 10px; opacity: .5; } .slideout-menu .mobile-sub-menu { display: none; } .mobile-sub-menu li:last-child { border-bottom: none; } .mobile-sub-menu {} .slideout-menu ul { margin-bottom: 0; border-bottom: 0; } .mobile-sub-menu li { padding-left: 10px; background-color: #ffffff; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="slideout-menu"> <ul> <li><a href="#">SUPPORT<i class="fa fa-arrow-right"></i></a> <ul class="mobile-sub-menu"> <li><a href="#">Title1</a> </li> <li><a href="#">Title2</a> </li> <li><a href="#">Title3</a> </li> </ul> </li> <li><a href="#">EDIT BOOK<i class="fa fa-arrow-right"></i></a> <ul class="mobile-sub-menu"> <li><a href="#">NEW</a> </li> <li><a href="#">BROWSE</a> </li> <li><a href="#">APPROVAL</a> </li> </ul> </li> </ul> </div> <button type="button" class="navbar-toggle slideout-menu-toggle" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 

Answer 2

Simply put, toggle a class and change the arrow icon using a css selector

.exampleClass {
      background-image: "rightArrow.png";
}

.exampleClass:active {
      background-image: "downArrow.png";
}