[英]slideUp() slideDown() doesn't work properly
$(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>
I want a accodion-menu. 我想要一个菜单菜单。 If the users hits one elment of the "outer"-menu it should succeed as follows:
如果用户点击“外部”菜单的其中一个元素,它将成功完成如下操作:
if(this submenu is closed){
1. open it
2. close the other submenu
} else
{
do nothing
}
It doesn't even react like this. 它甚至不会像这样反应。 So seems like I'm calling the wrong tag, with the .slideUp() function.
所以似乎我用.slideUp()函数调用了错误的标记。 Doesn't matter if I use slideUp() or slideDown() - please help :-)
不管我使用slideUp()还是slideDown()-请帮助:-)
Put this jQuery : 把这个jQuery的:
$(document).ready(function(){
$('.outer').click(function () {
$('.inner').slideUp();
$(this).next().find('.inner').slideDown();
});
});
It will slideUp all '.inner' classes and then it will select the good outer with $(this) selector, choose the elements after (I mean the ul), find all '.inner' classes and slide them down. 它将滑动所有'.inner'类,然后使用$(this)选择器选择良好的外部,在(我的意思是ul)之后选择元素,找到所有'.inner'类并将其向下滑动。
Check at this jsfiddle : jsfiddle 检查这个jsfiddle: jsfiddle
Wish it helped you. 希望它对您有帮助。
EDIT : If you want the menu to be wrapped at the beginning, you can make it with Jquery : 编辑:如果您希望菜单在开始时被包装,则可以使用Jquery进行制作:
$(document).ready(function(){
$('.inner').slideUp();
$('.outer').click(function () {
$('.inner').slideUp();
$(this).next().find('.inner').slideDown();
});
});
or with CSS : 或使用CSS:
.inner{
display:none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.