單擊時如何使箭頭旋轉？

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> 

單擊主項目時，該子項目會彈出。 主要項目上有一個箭頭圖標，當我單擊它時如何使它旋轉？

例如，箭頭指向右，當我單擊它時，子項目將顯示，箭頭圖標將指向下方。

Answer 1

單擊li時切換active的班級：

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

然后將其添加到您的CSS中：

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

完整的演示代碼段：

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

簡而言之，使用CSS選擇器切換類並更改箭頭圖標

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

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