slideUp() slideDown() 不能正常工作

Question

$(document).ready(function(){
  $('.outer').click(function () {

    $('.inner').slideUp();
    /*alert("I BIMS");*/
  });
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  background: #0b2027;
  /*line-height: 18px;*/
  height: 100%;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

a {
  text-decoration: none;
  color: #fff;
}

.btn-menu {
  top: 51px;
  display: block;
  padding: 20px;
  background: #23282d;
}

.btn-menu .icon {
  float: right;
}

.verticalMenu {
  padding-top: 40px;
  width: 20%;
  min-width: 300px;
  height: 100%;
  display: inline-block;
  /*line-height: 18px;*/
  background: #23282d;
}

.verticalMenu .menu {
  width: 100%; 
  height: 100%;
}

.verticalMenu ul{
  list-style: none;
}

.verticalMenu .menu li a{
  color: #fff;
  display: block;
  padding: 15px 20px;
}

.verticalMenu .menu .outer a:hover{
  background-color: #00b9eb;
  color: #fff;
}

.verticalMenu .menu .inner a:hover{
  color: #00b9eb;
}

.verticalMenu .menu .icon{
  font-size: 12px;
  line-height: 18px;
}

.verticalMenu .menu .icon.left{
  float: left;
  margin-right: 10px;
}

.verticalMenu .menu .icon.right{
  float: right;
  margin-left: 10px;
}

.verticalMenu .menu ul{
  /*display: none;*/
}

.verticalMenu .menu ul li a {
  background: #32373c;
  color: #e9e9e9;
}

.verticalMenu .menu .active > a{
  background: #1a95d5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalMenu">
  <!--<a href="" class="btn-menu">Menu<i class="icon fa fa-bars"></i></a>-->
  <ul class="menu">
    <li class="outer"><a href=""><i class="icon left fa fa-tachometer-alt"></i> Dashboard</a></li>
    <li class="outer"><a href=""><i class="icon left fa fa-folder"></i> Dokumentverwaltung <i class="icon right fa fa-chevron-down"></i></a></li>
      <ul>
        <li class="inner"><a href=""><i class="icon left fa fa-upload"></i> Upload Datei/Sammlung</a></li>
        <li class="inner"><a href=""><i class="icon left fa fa-plus-circle"></i> Dateil/Sammlung erstellen</a></li>
      </ul>
    <li class="outer"><a href=""><i class="icon left fa fa-key"></i>Rechteverwaltung <i class="icon right fa fa-chevron-down"></i></a></li>
      <ul>
        <li class="inner"><a href=""><i class="icon left fa fa-file"></i> Datei</a></li>
        <li class="inner"><a href=""><i class="icon left fa fa-users"></i> Gruppe</a></li>
        <li class="inner"><a href=""><i class="icon left fa fa-folder-open"></i> Sammlung</a></li>
      </ul>
    <li class="outer"><a href=""><i class="icon left fa fa-user"></i>Userverwaltung <i class="icon right fa fa-chevron-down"></i></a></li>
      <ul>
        <li class="inner"><a href="">User erstellen</a></li>
        <li class="inner"><a href="">User löschen</a></li>
        <li class="inner"><a href="">Gruppe erstellen</a></li>
        <li class="inner"><a href="">Gruppe löschen</a></li>
        <li class="inner"><a href="">User-Gruppe zuordnen</a></li>
        <li class="inner"><a href="">User-Gruppe löschen</a></li>
      </ul>
  </ul>
 </div>

我想要手风琴菜单。如果用户点击 "outer"-菜单的一个元素，它应该会成功，如下所示：

if(this submenu is closed){
   1. open it
   2. close the other submenu
} else
{
  do nothing
}

它甚至没有这样的反应。看来我用 .slideUp() 函数调用了错误的标签。不管我使用 slideUp() 还是 slideDown() - 请帮忙 :-)

Answer 1

把这个 jQuery :

$(document).ready(function(){
   $('.outer').click(function () {
       $('.inner').slideUp();
       $(this).next().find('.inner').slideDown();
   });
});

它将向上滑动所有'.inner' 类然后它将 select 带有 $(this) select 的好的外层 select 或者，选择之后的元素（我的意思是ul), 找到所有 '.inner' 类并将它们向下滑动。

查看这个 jsfiddle：jsfiddle

希望对你有所帮助。

编辑 : 如果你想让菜单在开始时换行，你可以用 Jquery :

$(document).ready(function(){
   $('.inner').slideUp();
   $('.outer').click(function () {
       $('.inner').slideUp();
       $(this).next().find('.inner').slideDown();
   });
});

或 CSS :

.inner{
    display:none;
}

slideUp() slideDown() 不能正常工作

slideUp() slideDown() doesn't work properly

javascript

jquery

html

slidedown

slideup