Наведите указатель мыши на меню Acordeon

Question

Я ищу решение, как открыть и закрыть аккордеон, перевернув над родительскими ссылками? Я знаю, что могу добавить метод наведения, но он всегда закрывает аккордеон, когда я удаляю курсор. Мне нужно закрыть только меню, когда я нахожу другой элемент.

Было бы здорово, если бы кто-нибудь мог дать мне подсказку!

$(document).ready(function() { 
 
    $('#nav > li > a').click(function(){ 
 
    if ($(this).attr('class') != 'active'){ 
 
     $('#nav li ul').slideUp(); 
 
     $(this).next().slideToggle(); 
 
     $('#nav li a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    } 
 
    }); 
 
    if($(".active").parent().parent().is('#nav')){ 
 
    \t \t $(".active").next().slideToggle(); 
 
    }else{ 
 
    \t $(".active").parents('ul').siblings('a').click(); 
 
    } 
 
    
 
});

#nav { 
 
    float: left; 
 
    width: 280px; 
 
} 
 
#nav li a { 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    color: #000; 
 
    list-style:none; 
 
} 
 
#nav li a:hover, #nav li a.active { 
 
} 
 
#nav li ul { 
 
    display: none; // used to hide sub-menus 
 
    list-style:none; 
 
} 
 
#nav li ul li a { 
 
    padding: 10px 25px; 
 
} 
 
ul{ 
 
    list-style:none; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="nav"> 
 
    <li><a href="#" >Item 1</a> 
 
    <ul> 
 
     <li><a href="#" class="active">Sub-Item 1 a</a></li> 
 
     <li><a href="#">Sub-Item 1 b</a></li> 
 
     <li><a href="#">Sub-Item 1 c</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 2 a</a></li> 
 
     <li><a href="#">Sub-Item 2 b</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 3 a</a></li> 
 
     <li><a href="#">Sub-Item 3 b</a></li> 
 
     <li><a href="#">Sub-Item 3 c</a></li> 
 
     <li><a href="#">Sub-Item 3 d</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 4</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 4 a</a></li> 
 
     <li><a href="#">Sub-Item 4 b</a></li> 
 
     <li><a href="#">Sub-Item 4 c</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Здесь то же самое в jsfiddle: https://jsfiddle.net/8y60hre0/8/

Answer 1

$(document).ready(function() { 
    $('#nav > li > a').click(function(){ 
    if ($(this).attr('class') != 'active'){ 
     $('#nav li ul').slideUp(); 
     $(this).next().slideToggle(); 
     $('#nav li a').removeClass('active'); 
     $(this).addClass('active'); 
    }else{ 
     $('#nav li a').removeClass('active'); 
     $(this).addClass('active'); 
     $(this).next().slideToggle(); 
    } 
    }); 

    $('#nav > li > a').hover(function(){ 
    if ($(this).attr('class') != 'active'){ 
     $('#nav li ul').slideUp(); 
     $(this).next().slideToggle(); 
     $('#nav li a').removeClass('active'); 
     $(this).addClass('active'); 
    } 
    }); 



    if($(".active").parent().parent().is('#nav')){ 
     $(".active").next().slideToggle(); 
    }else{ 
    $(".active").parents('ul').siblings('a').click(); 
    } 

});