顯示隱藏不工作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

回答

相關問題