下拉菜單JS [簡單]

Question

我正在為我的網站制作一個下拉菜單，但我不是JavaScript的老板，所以我在Internet上使用了現成的下拉菜單，並且對此進行了改進。 但是當我替換它的時候

<a href="" title="Afficher le sous-menu">Voir Plus</a> 

它可以工作，但是當我再次單擊此鏈接時，腳本不再起作用。

此處的示例： http : //jsfiddle.net/LZfY3/5/ 。 和代碼：

的CSS

        #navigation {
        margin: 0;
        padding: 0;
        color: #fff;
        width: 630px;
        font: 1.2em "Trebuchet MS", sans-serif;
        background: #ccc url(subMenu.png) 0 0 repeat-x;
        }
    #navigation .subMenuHidden, #navigation .toggleSubMenu{
        clear:both;
    }
    #navigation div.subMenuHidden a {
        padding: 3px 20px;
        float:right;
        }

的JavaScript

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

    $(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $("div.subMenu:not('.open_at_load')").hide();
    // On selectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'element span qu'ils contiennent par un lien :
    /*$("div.subMenuHidden span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
    } ) ;*/

    // On modifie l'evenement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $("div.subMenuHidden > a").click( function () {
        // Si le sous-menu etait deja ouvert, on le referme :
        if ($(this).prev("div.subMenu:visible").length != 0) {
            $(this).prev("div.subMenu").slideUp("normal");
        }
        // Si le sous-menu est cache, on ferme les autres et on l'affiche :
        else {
            $("div.subMenu").slideUp("normal");

            $(this).prev("div.subMenu").slideDown("normal", function() {$(this).next('a').replaceWith('<a href="" title="Afficher le sous-menu">Voir Moins</a>');});

        } 
        // On empêche le navigateur de suivre le lien :
        return false;
    });

} ) ;

的HTML

<ul id="navigation">
        <li class="toggleSubMenu" style="position: static;"><h2 class="toggleSubMenuH2">Images / Photos</h2>
            <div class="subMenuVis">
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
            </div>
            <div class="subMenuHidden"> 
                <div class="subMenu" style="display: none;">
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                </div>
                <a href="" title="Afficher le sous-menu" id="caca">voir plus</a>  
            </div>
        </li>
        <li class="toggleSubMenu" style="position: static;"><h2 class="toggleSubMenuH2">Vidéos</h2>
            <div class="subMenuVis">
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
                <div style="height: 100px; width: 178px; background-color: aqua; margin: 10; float: left;"></div>
            </div>
            <div class="subMenuHidden"> 
                <div class="subMenu" style="display: none;">
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                    <div style="height: 80px; width: 142px; background-color: aqua; margin: 0 0 10px 10px; float: left;"></div>
                </div>
                <a href="" title="Afficher le sous-menu">voir plus</a> 
            </div>
        </li>
    </ul>    

謝謝。 （對不起，我是法國人）

Answer 1

有一個問題，當dom准備就緒時，您的JS代碼將綁定（單擊操作）到項目上，您的JS代碼對DOM更改沒有反應。 DOM更改是通過您的replaceWith函數獲取的，最簡單的解決方案是將您的replaceWith函數更改為html並簡單地更改a-tag內容:)

$(this).prev("div.subMenu").slideDown("normal", function() {$(this).next('a').html('Voir Moins');});