I made a drop-down list using the collapse class, in which I added a crash class for slide-ups and slide-downs. After the extension, he adds the class "in". I made this destructive property work when it hangs. Now this will create a problem, as if I hung faster on more than one element, then they will all expand. but I just want to open one element at a time for proper functioning. this problem is mainly created when adding a collapsing class, since the collapsing class will give time to expand more than one element. Here is my code:
<style> .icon_images { display: inline-block; height: 32px; margin-left: -9px; margin-top: 3px; width: 32px; } .admin_icon_cell { background-color: rgba(149, 149, 149, 0.6); background-position: right center; background-repeat: no-repeat; display: table-cell; height: 46px; text-align: center; vertical-align: middle; width: 68px; } .admin_menu_cell { background-color: rgb(205, 205, 205); color: #333333; display: table-cell; font-family: "Arial"; font-size: 11px; font-weight: bold; padding-left: 10px; vertical-align: middle; width: 150px; } .menu_bg { border: 2px solid transparent; cursor: pointer; font-size: 94%; margin-left: 3px; margin-top: 15px; } </style>
jquery:
<script> function ab() { $('.li').hover(function () { var child1 = $("div", this); var child2 = $("ul", this); // child1.removeClass('collapsed'); child2.removeClass('collapse'); var thisdiv = $(child1).attr("data-target"); $(thisdiv).collapse("show"); child2.addClass('in'); }, function () { var child1 = $("div", this); var child2 = $("ul", this); //child1.addClass('collapsed'); //child2.removeClass('in'); var thisdiv = $(child1).attr("data-target"); $(thisdiv).collapse('hide'); //child2.addClass('collapse'); }); } </script>
HTML code:
<div id="wrapper" class="" style="height: 100%;"> <div style="background-color: #ffff00;width:255px;"> <ul class="nav" style="height: 100%;"> <li class="li"> <div class="menu_bg" data-toggle="collapse" data-target="#radio2,.in"> <div class="admin_icon_cell"> <div class="icon_images sprite2"> </div> </div> <div class="admin_menu_cell">hostel management</div> </div> <ul style="list-style: none;" class="collapse" id="radio2"> <li><a href="#">Information & Stats</a> </li> <li><a href="#">DJ Says</a> </li> <li><a href="#">Request Line</a> </li> <li><a href="#">Timetable</a> </li> <li><a href="#">Banned Songs</a> </li> </ul> </li> <li class="li"> <div class="menu_bg" data-toggle="collapse" data-target="#radio3,.in"> <div class="admin_icon_cell"> <div class="icon_images sprite3"> </div> </div> <div class="admin_menu_cell">User Management</div> </div> <ul style="list-style: none;" class="collapse" id="radio3"> <li><a href="#">Information & Stats</a> </li> <li><a href="#">DJ Says</a> </li> <li><a href="#">Request Line</a> </li> <li><a href="#">Timetable</a> </li> <li><a href="#">Banned Songs</a> </li> </ul> </li> <li class="li"> <div class="menu_bg" data-toggle="collapse" data-target="#radio4,.in"> <div class="admin_icon_cell"> <div class="icon_images"> <i class="fa fa-th-large fa-2x fa-spin" style=""></i> </div> </div> <div class="admin_menu_cell">Library management</div> </div> <ul style="list-style: none;" class="collapse" id="radio4"> <li><a href="#">Information & Stats</a> </li> <li><a href="#">DJ Says</a> </li> <li><a href="#">Request Line</a> </li> <li><a href="#">Timetable</a> </li> <li><a href="#">Banned Songs</a> </li> </ul> </li> </ul> </div>
source share