jquery - 向左切换菜单

Question

我试过制作一个从左到右切换的菜单，我从这篇文章的建议中复制了一些脚本:http://jsfiddle.net/QDUQk/1/ 但是，当我插入特定的类名和 ID 名时，我似乎没有工作。菜单将打开，但似乎不想关闭。我不确定我做错了什么。任何帮助将不胜感激。

我的 Jquery:

$(function() {
$('.menuBars').click(function () {
if($('.menuBars').is(':visible')){
    $('.menuBars').fadeOut(function () {
    $('.menuItems').toggle('slide', {
        direction: 'left'
    }, 1000);
});
}
else{
    $('.menuItems').toggle('slide', {
        direction: 'left'
    }, 1000, function() { $('.menuBars').fadeIn();});
}
});

这是我的 CCS:

.menuItems {
position:relative;
float: right;
display:none;
top: 50%;
margin-top:-9px;
background-color:#DEDEDE;
border-radius:4px;
padding-left:20px;
padding-top:2px;
padding-bottom:2px;}

和我的 HTML:

    <div class="nav">
    <div id="name">
        <p>Richard</p></div>
   <div class="menuBars">
        <a href="#"><i class="fa fa-bars"></i></a></div>

   <div class="menuItems">
        <ul>
            <li id="closer"><a href="#"><i class="fa fa-bars"></i></a></li>
            <li><a href="#">Projects</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
       </ul>   
    </div>

Answer 1

您在应用类时只是遗漏了一小部分，点击事件应该应用于 .menuBars 和 .menuItems。必须这样做，因为当菜单显示且标题隐藏时，您无法点击标题，您点击菜单，这应该会触发幻灯片和淡入淡出。

只需将函数更正为:

$('.menuBars, .menuItems').click(function () {

这应该可以解决您的问题 http://jsfiddle.net/wf0fpzy6/