在一个网页上重复两次相同的java菜单

时间:2012-10-10 16:44:22

标签: jquery

如果您使用类似于jqueryui.com上的菜单,您将如何在同一页面上重复此菜单2,3,4次?我知道如果我只是复制并粘贴整个块,第二个菜单将无法访问.js文件。

我一直在尝试使用.clone和appendTo,但我不确定这是否是正确的方向。

... TIA

这段代码不是我的,但是我正在看的是一个很好的例子:

<head>
<meta charset="utf-8">
<title>accordion demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>

<div id="accordion">
<h3>Section 1</h3>
<div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
</div>
<h3>Section 2</h3>
<div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
</div>
<h3>Section 3</h3>
<div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>
</div>

<script>
$( "#accordion" ).accordion();
</script>

</body>

2 个答案:

答案 0 :(得分:1)

一切都在手风琴初始化中。

致电时

$( "#accordion" ).accordion();

只需添加其他ID即可。例如

$( "#accordion1, #accordion2, #accordion3" ).accordion();

或者,你可以简单地为你想要应用手风琴的所有元素添加一个类,它们都将被初始化。

$( ".accordion" ).accordion();

答案 1 :(得分:0)

<div id="accordion1">
    ...
</div>

<div id="accordion2">
    ...
</div>

<script>
$(function() {
    $("#accordion1").accordion();
    $("#accordion2").accordion();
});
</script>