Question

我尝试过制作一个从左到右切换的菜单，然后我从这篇帖子的建议中复制了一些脚本：http://jsfiddle.net/QDUQk/1/ 但是，当我插入我的特定Class和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

首先，您的代码出现Uncaught TypeError: jQuery.easing[this.easing] is not a function错误。

您需要为扩展的宽松选项添加jQuery UI。

并且你的div不会关闭，因为关闭按钮没有任何事件。

固定代码

$(function() {
  $('#closer').click(function () {
    $('.menuBars').fadeIn(function () {
      $('.menuItems').toggle('slide', {
        direction: 'left'
      }, 1000);
    });
  });
  $('.menuBars').click(function(){
   $('.menuItems').toggle('slide', {
          direction: 'left'
      }, 1000, function() { $('.menuBars').fadeOut();});
  });
});

<强> Fiddle

Answer 2

您在申请课程时错过了一小部分内容，点击事件应该应用于.menuBars和.menuItems。必须这样做，因为当显示菜单并且标题被隐藏时你无法点击标题，你点击菜单就会触发幻灯片和淡入淡出。

只需将功能更正为：

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

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

切换菜单

2 个答案: