点击它后如何使箭头旋转？

时间：2015-07-06 03:34:08

标签： javascript jquery html css css-transitions

＆＃13;
＆＃13; 
$(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");
      });
    });
＆＃13; 
.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 a i {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

当我点击主要项目时，子项目将弹出。 主要项目上有一个箭头图标，当我点击它时，我该怎么做才能让它旋转？

例如，箭头指向右侧，当我点击它时，子项目将显示，箭头图标将指向下方。

2 个答案:

答案 0 :(得分：3)

点击active后切换课程li：

$('.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 a i {
  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>

答案 1 :(得分：-1)

简单地说，切换一个类并使用css选择器更改箭头图标

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

.exampleClass:active {
      background-image: "downArrow.png";
}
相关问题
最新问题