显示隐藏不工作onclick

我有这个。显示隐藏不工作onclick

<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

来源

2013-09-24 Anusha Honey

你应该使用[** ** JSHINT ]（http://www.jshint.com/），检查是否有语法错误。 – Praveen

你错过了这里报价：

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

我也补充说：

工作Fiddle

来源

2013-09-24 06:28:16 Greenhorn

+1，Good Catch Ram – Amit

为什么我的隐藏菜单显示不正确？我和d显示在同一行？ –

这是因为＃btn-toggle-menu宽度，将其更改为宽度：10px，http://jsfiddle.net/FWzAS/23/ – Greenhorn

你错过了整个ID报价：

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

Working Demo

来源

2013-09-24 06:28:26

一个缺少单引号我的男人，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-24 06:28:46

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

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

来源

2013-09-24 06:28:57

检查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-24 06:30:30

有什么区别？ – Amit

缺少$（'＃menu-wrapper）引用 –

它已在您之前发布。 – Amit

试试这个：

$(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-24 06:30:58

这里是你的问题：

您的代码：

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

更新代码：

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

你刚才忘了加（'）

来源

2013-09-24 06:31:39

$(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-24 06:31:48

显示隐藏不工作onclick

回答

相关问题