1
我正在用jQuery構建一個帶有幾個超鏈接的菜單,我想要的是在單擊超鏈接時顯示/隱藏包含子菜單的div。通過參數化的CSS選擇器查找元素
我試過如下:
$("div#divmnu" + mnuidx).show();
$("div#divmnu" + mnuidx).animate({ height: '300px' }, 300);
但它不工作!
任何人都可以幫助我嗎?
我正在用jQuery構建一個帶有幾個超鏈接的菜單,我想要的是在單擊超鏈接時顯示/隱藏包含子菜單的div。通過參數化的CSS選擇器查找元素
我試過如下:
$("div#divmnu" + mnuidx).show();
$("div#divmnu" + mnuidx).animate({ height: '300px' }, 300);
但它不工作!
任何人都可以幫助我嗎?
這工作:
<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>
也請分享您的HTML? –