2014-02-11 50 views
1

我正在用jQuery構建一個帶有幾個超鏈接的菜單,我想要的是在單擊超鏈接時顯示/隱藏包含子菜單的div。通過參數化的CSS選擇器查找元素

我試過如下:

$("div#divmnu" + mnuidx).show(); 
$("div#divmnu" + mnuidx).animate({ height: '300px' }, 300); 

但它不工作!

任何人都可以幫助我嗎?

+0

也請分享您的HTML? –

回答

1

這工作:

<html> 
<head> 
<title>JQuery Show/Hide w/ Animate</title> 
<script src="js/jquery-1.8.2.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script> 
    function show(button) { 
     var idx = button.attr("id").substring(1); 
     $("div#menu" + idx).show(); 
     $("div#menu" + idx).animate({ height: '300px' }, 300); 
    } 
    function hide(button) { 
     var idx = button.attr("id").substring(1); 
     $("div#menu" + idx).animate({ height: '20px' }, 300, "swing", function() { $("div#menu" + idx).hide(); }); 
    } 
    $(document).ready(function() { 
     $("div#menu1").hide(); 
     $("div#menu2").hide(); 
     $("#s1").click(function() { show($(this)); }); 
     $("#s2").click(function() { show($(this)); }); 
     $("#h1").click(function() { hide($(this)); }); 
     $("#h2").click(function() { hide($(this)); }); 
    }); 
</script> 
</head> 
<body> 
<div id="menu1" style="font-size: xx-large;">Menu 1</div> 
<div id="menu2" style="font-size: xx-large;">Menu 2</div> 
<div><button id="s1">Show 1</button><button id="s2">Show 2</button> 
    <button id="h1">Hide 1</button><button id="h2">Hide 2</button></div> 
</body> 
</html>