Как скрыть и показать подменю?

Question

Я пытаюсь создать сдвижную навигацию jQuery, и я наткнулся на некоторые проблемы. Я не знаю, как скрыть/скрыть и отобразить мое подменю.

Вот HTML:

<div class="content"> 
    <div class="page-content"> 
    </div> 
    <div class="sidebar-nav"> 
    <header class="logo"> 
     <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> 
      <span id="logo">NAV</span> 
    </header> 

    <div class="nav"> 
     <ul id="nav" > 
     <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li> 
     <li><a href="#"><i class="fa fa-anchor"></i><span>Profile</span><span class="fa fa-plus" style="float: right"></span></a> 
      <ul> 
       <li>Item 1</li> 
       <li>Item 2</li> 
       <li>Item 3</li> 
      </ul> 
     </li> 

     </li> 
     <li><a href="#"><i class="fa fa-gears"></i><span>Contact</span></a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Пожалуйста, помогите!

Answer 1

Пробуйте следующее:

CSS:

.disp { 
    opacity: 1!important; 
    height:auto!important; 
    transition: height 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

ЯШ:

$('.nav a').click(function(){ 
$(this).closest('li').find('ul').toggleClass('disp'); 
$(this).find('span.fa').toggleClass('fa-plus').toggleClass('fa-minus'); 
}); 

http://jsfiddle.net/2tz4usnL/3/

Answer 2

В вашем JSFiddle есть ошибка относительно вашего toggle = !toggle. Однако почему бы просто не использовать $('#elementId').toggle()? Это JQuery, и он значительно упрощает этот код. См. here для моего JSFiddle и ниже для моего кода.

HTML:

<nav class="sidebar-nav"> 
    <header class="logo"> 
    <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> 
    <span id="logo">NAV</span> 
    </header> 
    <ul id="nav" class="nav"> 
    <li><a href="#"><i class="fa fa-home"></i>Home</a></li> 
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i></a> 
    <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"> 
     <li><a href="#">profile.1</a></li> 
     <li><a href="#">profile.2</a></li> 
     <li><a href="#">profile.3</a></li> 
    </ul> 
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu2" aria-expanded="false"><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i></a> 
     <ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1"> 
     <li><a href="#">About.1</a></li> 
     <li><a href="#">About.2</a></li> 
     <li><a href="#">About.3</a></li> 
     </ul> 
    </li> 
    <li><a href="#"><i class="fa fa-history"></i>Blog</a></li> 
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu3" aria-expanded="false"><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i></a> 
     <ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1"> 
     <li><a href="#">Deals.1</a></li> 
     <li><a href="#">Deals.2</a></li> 
     <li><a href="#">Deals.3</a></li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

CSS (я взял многое из этого от оригинального Fiddle):

html, 
body { 
    font-family: 'Lato', sans-serif; 
    height: 100%; 
    background: #ecf0f1; 
} 

a { 
    color: #008DE7; 
    font-style: italic; 
    font-weight: 700; 
} 

.expandNav { 
    float: right; 
    padding-top: 4px; 
} 

.content { 
    min-width: 1260px; 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0px auto; 
} 

.content.sidebar-collapsed { 
    padding-right: 65px; 
    transition: all 100ms linear; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back { 
    padding-right: 280px; 
    transition: all 100ms linear; 
} 

.content.sidebar-collapsed .sidebar-nav { 
    width: 65px; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back .sidebar-nav { 
    width: 280px; 
    transition: all 100ms ease-in-out; 
} 

.content.sidebar-collapsed .logo { 
    padding: 26px; 
    box-sizing: border-box; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back .logo { 
    width: 100%; 
    padding: 21px; 
    height: 136px; 
    box-sizing: border-box; 
    transition: all 100ms ease-in-out; 
} 

.content.sidebar-collapsed #logo { 
    opacity: 0; 
    transition: all 200ms ease-in-out; 
} 

.content.sidebar-collapsed-back #logo { 
    opacity: 1; 
    transition: all 200ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed #nav span { 
    opacity: 0; 
    transition: all 50ms linear; 
} 

.content.sidebar-collapsed-back #nav span { 
    opacity: 1; 
    transition: all 200ms linear; 
} 

.sidebar-nav { 
    position: fixed; 
    float: left; 
    width: 250px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #e74c3c; 
    color: #aaabae; 
    font-family: "Lato"; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
    z-index: 1; 
} 

#nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 20px; 
} 

#nav li { 
    position: relative; 
    margin: 0; 
    font-size: 15px; 
    border-bottom: 1px solid #fff; 
    padding: 0; 
} 

#nav li a { 
    font-style: normal; 
    font-weight: 400; 
    position: relative; 
    display: block; 
    padding: 16px 25px; 
    color: #fff; 
    white-space: nowrap; 
    z-index: 2; 
    text-decoration: none 
} 

#nav li a:hover { 
    color: #c0392b; 
    background-color: #ecf0f1; 
} 

#nav ul li { 
    background-color: #2b303a; 
} 

#nav li:first-child { 
    border-top: 1px solid #fff; 
} 

#nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

#nav .fa { 
    margin: 0px 17px 0px 0px; 
} 

.logo { 
    width: 100%; 
    padding: 21px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
} 

#logo { 
    color: #fff; 
    font-size: 30px; 
    font-style: normal; 
} 

.sidebar-icon { 
    position: relative; 
    float: right; 
    text-align: center; 
    line-height: 1; 
    font-size: 25px; 
    padding: 6px 8px; 
    color: #fff; 
} 

и JS (Это было просто переключать иконки):

$('#nav a').click(function() { 
    $(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square'); 
}); 

Answer 3

Вот Working Fiddle

Добавьте это скрипты

$('#nav a .fa.fa-plus').on('click',function(){ 
    $(this).toggleClass('fa-plus').toggleClass('fa-minus'); //to toggle icons 
    $(this).closest('li').find('ul').toggleClass('active'); 
}); 

И это CSS

#nav li ul { 
    /*opacity: 0;*/ /* changed */ 
    height: auto; /* changed */ 
    display: none; /* added */ 
} 

#nav li ul.active { /* added */ 
display:block; 
}