下拉菜单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');});