2014-02-11 49 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>