Question

我在找到一个可以用来让我的侧边栏作为动画下拉的插件时遇到了很多麻烦。它已经上市，但它会把锦上添花（王国之心粉丝）。这是用于制作侧边栏的CSS，JS和HTML。我还在学习JS，所以如果有人能帮我搞清楚那就太棒了！

$(function () {
    $(".sidebar-hidden, #menu-close").click(function (e) {
      e.stopPropagation();
      $(".sidebar-hidden").toggle();
      $(".sidebar").toggle();
    });
    $(document).click(function (e) {
      if ($(".sidebar").is(":visible")) {
        $(".sidebar-hidden").toggle();
        $(".sidebar").toggle();
      }
    });
    $(".sidebar").click(function (e) {
      e.stopPropagation();
    });
  });


.sidebar-hidden {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #86c7ff;
  position: absolute;
  padding: 8px;
  margin-left: 0;
}

.sidebar {
  position: absolute;
  padding: 8px;
  margin-left: 0;
  background-color: #86c7ff;
  line-height: 20px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  min-width: 105px;
  &:hover {
    display: block;
  }
  ul {
    margin: 0 0 0 5px;
    li {
      padding: 4px;
      border-top: dotted 1px;
      &:first-child {
        border-top: none;
      }
      a {
        text-indent: 3px;
        text-decoration: none;
        color: black;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
        display: block;
        &:hover {
          color: white;
          font-size: 17px;
        }
      }
    }
  }
}

<div class="sidebar-hidden">
  <i style="font-size: 18px" class="icon-arrow-right"></i>
</div>
<div class="sidebar" style="display: none;">
  <p id="menu-close" style="font-size: 18px; font-weight: bold;">Tools&nbsp;&nbsp;<i class="icon-arrow-left"></i></p>
  <ul>
    <li class="s-b-border"><a href="#"><i class="icon-calendar"></i> Syncro </a></li>
    <li class="s-b-border"><a id="Tool-BoM" href="#"><i class="icon-file"></i> BoM</a></li>
    <li><a href="#"><i class="icon-hdd"></i> Override&nbsp;</a></li>
  </ul>
</div>

*注意：任何包含BoM的东西都与我项目中的另一个文件有关，所以请忽略它。

Answer 1

.toggle()将duration作为参数，您可以指定将动画效果添加到侧边栏。在您的情况下，将.toggle()替换为，

.toggle("slow") //or number of milliseconds of the animation duration

Test Link

Answer 2

如果有人点击页面上的任何地方，它似乎也会切换侧边栏。我会选择安德鲁所说的并使用slideUp()和slideDown()

使我的侧边栏下拉列表

2 个答案: