0

我很难找到一个可以用来让侧边栏作为动画下拉的插件。它已经可以使用，但它会锦上添花（Kingdom Hearts 粉丝）。这是用于制作侧边栏的 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 的内容都与我项目中的另一个文件有关，因此请忽略它。

4

2 回答 2

1

.toggle()duration作为一个参数，你可以指定它来为你的侧边栏添加一个动画效果。

在你的情况下，替换.toggle()为，

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

测试链接

于 2013-06-26T19:06:58.683 回答
0

如果有人单击页面上的任何位置，它看起来也将切换侧边栏。我会接受安德鲁所说的并使用slideUp()和slideDown()

于 2013-06-26T19:06:42.290 回答