向下旋转不工作

Question

我是jquery的新手。我尝试用箭头创建菜单。我点击它需要旋转。所以我尝试下面的代码，但它不起作用。我在那段代码中做错了什么？

我的尝试

<style>
        .down-caret {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #ffffff transparent transparent transparent;
  display: inline-block;
  margin-left: 6px;
  top: -3px;
  position: relative;
  transform: rotate(0deg);
  transition: all .25s ease-in;
}

  .open-caret {
    transform: rotate(180deg);
    transition: all .25s ease-out;
  }
    </style>
     <script>

         $(document).ready(function () {
             $(document).on('click','.col-md-9', function () {
                 $(this).find('.collapse').toggleClass('open');
                 $($(e.target).find('.down-caret').toggleClass('open-caret'));
                 e.preventDefault();
                 e.stopPropagation();
                 $(document).click(function () {
                     $('.collapse').removeClass('open');
                     $('.down-caret').removeClass('open-caret');
                 });

             });

         });
        </script>

**HTML CODE**


 <div id="MainMenu">
    <div class="list-group panel">
         <span class="row" style="padding-top:10px;">
             <span class="col-md-3 "><i id="icon" style="color:white;" class="fa fa-laptop"></i></span>
             <span id="mastermenu" class="col-md-9"><a href="#demo3" id="menuItem" data-toggle="collapse" data-parent="#MainMenu" style=" color:white;">Master <span class="down-caret"></span> </a></span>
         </span>

      <div class="collapse" id="demo3">
      <div class="" style="color:white;padding:5px 0px 0px 5px; margin:10px auto;"><a href="#SubMenu1"  data-toggle="collapse" data-parent="#SubMenu1" style="color:white;"><i class="fa fa-laptop" style="margin-right:10px;"></i>User</a></div>
         <div class="collapse list-submenu" style="padding:5px 0px 0px 10px;" id="SubMenu1" >
            <a href="Assest_Master.aspx"  data-parent="#SubMenu1" style="color:white;">Add User</a><br />
            <a href="PaymentCollection.aspx"  data-parent="#SubMenu1" style="color:white;">Manage User</a>
          </div>
       </div>
    </div>

Answer 1

您没有在函数中指定事件参数，但是您使用了e.target，因此它无效。

这是工作JsFiddle