下拉动画正常下拉

Question

我有这个下拉菜单

这是我的代码：

$(function() {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});

.fa-caret-down {
  postion: relative;
}

#canvas-dropdown {
  position: absolute;
  left: 145px;
  top: 35px;
}

.dropdown>.dropdown-menu {
  display: none;
  position: absolute;
  border: 1px solid #bdc3c7;
  min-width: 60px;
  margin: 0;
}

.dropdown.open>.dropdown-menu {
  display: inline-block;
}

.click-nav ul {
  position: relative;
  display: inline-block;
  margin-left: -40px
}

.click-nav ul li {
  position: relative;
  list-style: none;
  cursor: pointer;
}

.click-nav ul li ul {
  position: absolute;
  left: 0;
  right: 0;
}

.click-nav ul .clicker {
  position: relative;
}

.click-nav ul li a {
  display: block;
  color: black;
  text-decoration: none;
  margin-left: -30px;
  margin-top: 55px
}

.click-nav .no-js ul {
  display: none;
}

.click-nav .no-js:hover ul {
  display: block;
}

.click-nav ul li a {
  transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  display: block;
  padding: 8px 10px 8px 0px;
  background: #FFF;
  color: #18181d;
  text-decoration: none;
}

.click-nav ul li a:hover {
  background: #F2F2F2;
  color: #18181d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="click-nav">
      <ul class="no-js">
        <li>
          <i class="fa fa-caret-down clicker"></i> I  </span>
<ul style="margin-top:-35px;margin-left:-115px;width:160px;text-align:left;">
  <li><a href="../profile" style="margin-bottom:-60px;"> &nbsp; &nbsp;My Profile</a></li>
  <li><a href="../logout.php"> &nbsp; &nbsp;Logout</a></li>

</ul>
</li>
</ul>
</span>

https://jsfiddle.net/5p6d6urc/

它可以正常工作，但是当我单击向下箭头以访问它时，它会从顶部和按钮以某种轻松（弹出）的方式打开。 当我只需要显示一个下拉列表时。 当我单击向下箭头时，下拉列表是否可能没有任何作用？

Answer 1

为什么不简单地将slideToggle()动画的持续时间更改为1ms？

这是更新的小提琴： https : //jsfiddle.net/5p6d6urc/3/

 $(function () { $('.click-nav > ul').toggleClass('no-js js'); $('.click-nav .js ul').hide(); $('.click-nav .js').click(function(e) { $('.click-nav .js ul').slideToggle(1); $('.clicker').toggleClass('active'); e.stopPropagation(); }); $(document).click(function() { if ($('.click-nav .js ul').is(':visible')) { $('.click-nav .js ul', this).slideUp(); $('.clicker').removeClass('active'); } }); }); 

 .click-nav {margin:100px auto;width:200px;} .click-nav ul {position:relative;font-weight:900;padding-left:0} .click-nav ul li {position:relative;list-style:none;cursor:pointer;} .click-nav ul li ul {position:absolute;left:0;right:0;} .click-nav ul .clicker {position:relative;background:#2284B5;color:#FFF;} .click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;} .click-nav img {position:absolute;top:9px;left:12px;} .click-nav ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out; -moz-transition:background-color 0.2s ease-in-out;display:block;padding:8px 10px 8px 40px;background:#FFF;color:#333;text-decoration:none;} .click-nav ul li a:hover {background:#F2F2F2;} /* Fallbacks */ .click-nav .no-js ul {display:none;} .click-nav .no-js:hover ul {display:block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="click-nav"> <ul class="no-js"> <li> <a href="#" class="clicker">hi</a> <ul> <li><a href="#">hi</a></li> <li><a href="#">hi</a></li> </ul> </li> </ul> </div>