下拉菜單JS

Question

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

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

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

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

的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 h2 {
    margin: 0 0 0 0;
}
#navigation h2 {
    display: block;
    padding: 4px 10px;
    color: #fff;
    text-decoration: none;
    background: #000 url(menu-item.png) left bottom no-repeat;
}
#navigation .subMenuHidden, #navigation .toggleSubMenu{
    clear:both;
}
#navigation .subMenuHidden,  #navigation .subMenuVis {
    font-size: .8em;
    font-size: .9em;
    margin: 0;
    padding: 0;
}
#navigation div.subMenuHidden a {
    padding: 3px 20px;
    float:right;
}
<!--[if lte IE 6]>
li {
      height: 1px;
    }

的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", function () {$(this).next("a").replaceWith('<a href="" title="Afficher le sous-menu">voir plus/see more</a>') } );
        }
        // Si le sous-menu est cache, on ferme les autres et on l'affiche :
        else {
            $("div.subMenu").slideUp("normal", function () { $(this).next("a").replaceWith('<a href="" title="Afficher le sous-menu">voir plus/see more</a>') } );
            $(this).prev("div.subMenu").slideDown("normal", function () { $(this).next("a").replaceWith('<a href="" title="Afficher le sous-menu">voir moins/see less</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

您的問題似乎是a變量，在給定上下文中未定義（也未聲明）：

$(a).replaceWith()

我想您想改用選擇器？

$('a').replaceWith()

請參閱更新的小提琴。