Question

我有这个。

<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);

});
});

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

Answer 1

你错过了一个引用：

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

我补充说：

工作Fiddle

Answer 2

你错过了id：

的报价

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

Working Demo

Answer 3

我的男人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);
    });
});

Answer 4

你的'没有正确设置检查出来。

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

Answer 5

检查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);

    });
});

Answer 6

试试这个：

$(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
   });
});

Answer 7

这是你的问题：

您的代码：

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

更新的代码：

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

你忘记添加（'）

Answer 8

$(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/

显示隐藏不工作onclick

8 个答案: