Отмена анимации при щелчке или удалении класса при нажатии

Question

Как удалить или отменить анимацию, когда я нажимаю на div, он открывает второй div с подменю, это прекрасно, дело в том, что я добавил подменю и это показывает, когда парение, но если нажать на любую ссылку на ссылку парения он открывает второй DIV ...

<div class="togger"> 
    Nice Title 
    <div class="sub-menu-hover"> 
     <a href="foo.html">Some page</a> 
    </div> 
</div> 
<div class="hiden-menu"> 
    <a href="foo.html">Some page</a> 
</div> 

Так что, когда я нажимаю на «Nice Title» он отображает «.hiden-меню» , это нормально, когда я нахожу «Хороший заголовок», он отображает «.sub-menu-hover» тоже прекрасно, проблема в том, что я нажимаю на любое тег «a» в меню «.sub-menu-hover» ». Что он делает, так это то, что он открывает «.hiden-menu», и я не хочу этого ...
Я замечаю, что когда я нажимаю на то, что находится внутри «.toggler», он добавляет класс «.active» и он открывает «.hiden-menu», поэтому как я могу предотвратить это, когда кто-то щелкнет внутри «.sub-menu-hover»? он должен принимать только вам то, что ссылка, которую вы нажмите на ...
Я сделал это

<script> 
    (function($) { 
     $(".sub-menu-hover").click(function(){ 
      $('.toggler').removeClass('active'); 
     }) 
    })(jQuery); 
</script> 

, но ничего не делал ...

Answer 1

$(".togger p").click(function() { 
 
    $(".hiden-menu").toggle(); 
 
    $(".sub-menu-hover").hide(); 
 
}); 
 
$(".togger p").mouseover(function() { 
 
    $(".sub-menu-hover").show(); 
 
}); 
 
$(".togger p").mouseout(function() { 
 
    $(".sub-menu-hover").hide(); 
 
});

.sub-menu-hover, 
 
.hiden-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="togger"> 
 
    <p>Nice Title</p> 
 
    <div class="sub-menu-hover"> 
 
    <a href="#">hover Some page</a> 
 
    </div> 
 
</div> 
 

 
<div class="hiden-menu"> 
 
    <a href="#">click Some page</a> 
 
</div>