Выпадающее меню на нескольких страницах с использованием jquery

Question

У меня было выпадающее меню, которое мне нужно использовать на нескольких страницах, есть ли способ кодировать выпадающее меню на другой странице и использовать его на нескольких страницах.(Примерно так, когда я нажимаю на изображение, должно появиться выпадающее меню, у меня было одно и то же изображение на нескольких страницах, когда я щелкаю это изображение, должно отображаться выпадающее меню)

Fiddle: http://jsfiddle.net/exuY9/1/

<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>') );`