Question

我有一个下拉菜单，我需要在多个页面中使用，有没有办法在其他页面中编写下拉菜单并在多个页面中使用它。（当我点击图像时必须出现一个下拉菜单，我在多个页面中有相同的图像，当我点击该图像时，必须显示一个下拉菜单）

<ul id="container">

    <li class="draggable">
        <div class="header">
            <h1>1</h1>
            <div class="button"></div>
            <div class="button dropmenu"  id="menuwrap">
                <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a>
                <ul class="menucontainer" style="margin:0px" id="dr1">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
            <div class="button"></div>
        </div>
    </li>

    <li class="draggable">
        <div class="header">
            <h1>2</h1>
            <div class="button minimize"></div>
            <div class="button dropmenu" id="menuwrap2">
                <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a>
                <ul class="menucontainer" style="margin:0px" id="dr2">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
            <div class="button maximize"></div>
        </div>
    </li>

</ul>

Answer 1

是的，你可以通过移除两个元素中的现有菜单并在页面底部只放置一个menucontainer实例来实现这一点，

<ul class="menucontainer" style="display:none;">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

然后使用jQuery，将该元素的副本附加到每个dropmenu元素...

$(".dropmenu").append( $(".menucontainer").clone() );

我编辑了你的小提琴，以展示它的工作原理：http://jsfiddle.net/promatik/bHJvs/
我删除了所有未使用的东西，以显示你问的内容......

还有另一种方法可以做到这一点，如果你不想在页面底部隐藏HTML代码块，你可以用jQuery添加元素：

$(".dropmenu").append( $('<ul class="menucontainer"><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul>') );`

使用jquery在多个页面中的下拉菜单

1 个答案: