1

我有这个。

<div id="btn-toggle-menu">Menu</div>
<div id="menu-wrapper">
<ul>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
    <li>link item</li>
</ul>
</div>

我正在尝试使用以下 jQuery 显示/隐藏菜单包装器。

$(document).ready(function() {
$('#btn-toggle-menu').click(function() {
var hidden = $('#menu-wrapper').data('hidden');
$('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
if(hidden){
    $('#menu-wrapper).animate({
        left: '0px'
    },500)
} else {
    $('#menu-wrapper').animate({
        left: '-210px'
    },500)
}
$('#menu-wrapper').data("hidden", !hidden);

});
});

但是，不知何故它不起作用..我哪里出错了？演示

4

8 回答 8

3

你在这里错过了一个报价：

if(hidden){
    $('#menu-wrapper).animate({

我补充说：

工作小提琴

于 2013-09-24T06:28:16.913 回答
0

您错过了 id 的报价：

$('#menu-wrapper').animate({

工作演示

于 2013-09-24T06:28:26.163 回答
0

一个缺少的单引号我的男人，http://jsfiddle.net/Anusha_Mallajosyula/FWzAS/12/，

$(document).ready( function() {
    $('#btn-toggle-menu').click( function() {
       var hidden = $('#menu-wrapper').data('hidden');
       $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
       if ( hidden ) {
          $('#menu-wrapper').animate({
              left: '0px'
          },500);
       } else {
          $('#menu-wrapper').animate({
              left: '-210px'
          },500)
       }
       $('#menu-wrapper').data("hidden", !hidden);
    });
});
于 2013-09-24T06:28:46.270 回答
0

您的 ' 设置不正确，请检查一下。

if ( hidden ) {
    $('#menu-wrapper').animate({
        left: '0px'
    },500);
} else {
    $('#menu-wrapper').animate({
        left: '-210px'
    },500);
}
于 2013-09-24T06:28:57.237 回答
0

检查JS小提琴，错过报价$('#menu-wrapper')

http://jsfiddle.net/FWzAS/19/

$(document).ready(function() {
    $('#btn-toggle-menu').click(function() {
    var hidden = $('#menu-wrapper').data('hidden');
    $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
    if(hidden)
    {
        $('#menu-wrapper').animate({left: '0px' },500)
    } 
          else {
        $('#menu-wrapper').animate({
            left: '-210px'
        },500)
    }
    $('#menu-wrapper').data("hidden", !hidden);

    });
});
于 2013-09-24T06:30:30.633 回答
0

试试这个：

$(document).ready( function() {
   $('#btn-toggle-menu').click( function() {
      var menuWrapper = $('#menu-wrapper');
      var hidden = menuWrapper.data('hidden');
      $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
      if ( hidden ) {
         menuWrapper.animate({
            left: '0px'
         },500);
      } else {
         menuWrapper.animate({
            left: '-210px'
         },500)
      }
      menuWrapper.data(menuWrapper, "hidden", !hidden); //see change in the method
   });
});
于 2013-09-24T06:30:58.233 回答
0

这是你的问题：

你的代码：

$('#menu-wrapper).animate({
   left: '0px'
},500);

更新代码：

$('#menu-wrapper').animate({
   left: '0px'
},500);

您只是忘记添加 (')

于 2013-09-24T06:31:39.333 回答
0 
$(document).ready( function() {
   $('#btn-toggle-menu').click( function() {
      var hidden = $('#menu-wrapper').data('hidden');
      $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
      if ( hidden ) {
         $('#menu-wrapper').animate({
            left: '25px'
         },500);
      } else {
         $('#menu-wrapper').animate({
            left: '-210px'
         },500);
      }
      $('#menu-wrapper').data("hidden", !hidden);
   });
});

http://jsfiddle.net/FWzAS/22/

于 2013-09-24T06:31:48.100 回答