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-menu”，这很好，当我将鼠标悬停在“Nice Title”上时，显示“.sub-menu-hover”也很好，问题是当我点击“.sub-menu-hover”中的任何菜单“a”标签时。它的作用是打开“.hiden-menu”，我不希望这样...... 我注意到当我点击“.toggler”里面的内容时，它会添加一个“.active”类，它会打开“.hiden-menu”，所以当有人点击“.sub-menu-hover”时，如何防止这种情况发生。 “？它应该只带你到你点击的任何链接...
我这样做了

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

但没有做任何事......

Answer 1

＆＃13;

$(".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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

单击时取消动画或单击时删除类

1 个答案: