Question

我正在为我的网站制作一个下拉菜单，但我不是JavaScript的老板所以我在互联网上采用现成的下拉菜单，我改进了这一点。但是当我想替换我的

时

<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()

See the updated fiddle.

下拉菜单JS

1 个答案: