Question

我正在尝试使用淡化滚动效果的菜单。

正如您在my fiddle中看到的那样，当我点击之前打开子菜单的相同按钮时，它会起作用。

HTML

<div class="menu">
<ul>
    <li class="submenu">
        <a href="#">One link</a>
        <ul class="sub-menu">
            <li><a href="#">Some actions</a></li>
            <li><a href="#">Some actions</a></li>
            <li><a href="#">Some actions</a></li>
        </ul>
    </li>
    <li class="submenu">
        <a href="#">Another link</a>
        <ul class="sub-menu">
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
        </ul>
    </li>
</ul>        
</div>

CSS

.menu ul {
    display: block;
    list-style-type: none;
}
.menu ul { 
    margin: 0;
    padding: 0;
}

.menu .submenu a {
    text-decoration: none;
}

.menu .submenu > a {
    color: red;
    display: block;
    width: 30%;
    border: 1px solid red;
    padding: 20px 10px;
    margin-bottom: 20px;
}

.menu .submenu > a:hover {
   background-color: red;
   color: #fff;
}

.menu .sub-menu {
   opacity: 0;
   display: none;
   position: absolute;
   top: 0;
   border: 1px solid orange;
   text-align: center;
 }

.menu .sub-menu a {
   color: orange;
   width: 30%;
   padding: 0 20px;
}

.menu .sub-menu a:hover {
   color: #fff;
   background: orange;
}

JQuery的

var handler, target;

$(".menu .submenu > a").click(function(e) {
    e.preventDefault();
    handler = $(this);
    target = handler.siblings(".sub-menu");
    if (!target.hasClass("showing")){
    target.addClass("showing");
        handler.css("background-color", "red");
    handler.css("color","#fff");
    target.css( "display", "block" );
    target.animate({
        opacity: 1,
    left: "+=200",
    }, "fast");
} else {
    target.removeClass("showing");
    target.animate({
        left: "-=200",
        opacity: 0
    }, "fast", function() {
        target.css( "display", "none" );
        handler.css("background-color", "");
        handler.css("color","");
    });
}
});

$(".menu .submenu > a").blur(function() {
     handler = $(this);
 target = handler.siblings(".sub-menu");
 if (target.hasClass("showing")){
     target.removeClass("showing");
     target.animate({
         left: "-=200",
     opacity: 0
         }, "fast", function() {
         target.css( "display", "none" );
     handler.css("background-color", "");
     handler.css("color","");
     });
  }
});

但是，如果将其与另一个子菜单按钮交替，则会失败:(

非常感谢你的帮助。谢谢！

已更新 我注意到它在Firefox，Chrome和IE中有不同的行为。我想在按下新按钮时隐藏上一个按钮：/

Jquery的菜单和子菜单问题

0 个答案: