2

我已经设置了一个 jquery 悬停显示和隐藏功能单击此处获取站点但是它不能按我想要的方式工作。当您将鼠标悬停在“存储”链接上时，它会显示隐藏的 div，这是一个子菜单，一旦鼠标光标从链接“存储”移动，隐藏的 div 就会滑动。

我希望子菜单保持激活状态，除非单击子菜单中的链接或鼠标光标已移出子菜单区域。

下面是我的代码片段...

 $(document).ready(function(){
        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').hover(function(){
        $(".slidingDiv").slideToggle();
        });

        $('.slidingDiv').mouseout(function(){
        $(".slidingDiv").slideUp();
    });
      });

<div id="menu_store" class="slidingDiv transparent">
<div class="menu">
<h3>clothing</h3>
<ul class="navigation">
  <li><a href="#">sweats / knitwear</a></li>
  <li><a href="#">shirts</a></li>
  <li><a href="#">denim</a></li>
  <li><a href="#">outwear</a></li>
  <li><a href="#">footwear</a></li>
</ul>
</div>
<div class="menu">
    <h3>lifestyle</h3>
 <ul class="navigation">
     <li><a href="#">books</a></li>
     <li><a href="#">art</a></li>
     <li><a href="#">objects</a></li>
 </ul>


<div id="menu">
<ul class="cl">
    <li><a class="show_hide" href="#">store</a></li>
    <li><a href="#">daily</a></li>
    <li><a href="#">featured</a></li>
    <li><a href="#">contact</a></li>

</ul>

有没有人对此有解决方案...？

4

1 回答 1

1

我想到了。http://jsfiddle.net/vtFfv/ 相关文档：http ://api.jquery.com/mouseleave/

$(document).ready(function () {
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').mouseenter(function () {
        $(".slidingDiv").slideDown();
        $(".slidingDiv").mouseleave(function () {
            $(".slidingDiv").slideUp();
        });
        $('.slidingDiv a').each(function () {
            $(this).click(function () {
                $(".slidingDiv").slideUp();

            });
        });
    });
});

当您 hide 时slidingDiv，鼠标事件不会被注册。mouseleave因此，解决方案是在您决定显示它（即 on ）后为其附加一个事件mouseenter。然后注册点击链接很容易。

于 2013-05-12T09:56:18.573 回答