Javascript 下拉菜单JS[简单]_Javascript_Jquery_Html_Css_Web

Javascript 下拉菜单JS[简单]

javascript jquery html css web

Javascript 下拉菜单JS[简单],javascript,jquery,html,css,web,Javascript,Jquery,Html,Css,Web,我正在为我的网站制作一个下拉菜单，但我不是JavaScript的老板，所以我在互联网上制作了一个现成的下拉菜单，并对此进行了改进。但什么时候我会用它来代替我的 <a href="" title="Afficher le sous-menu">Voir Plus</a> JavaScript <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"><

我正在为我的网站制作一个下拉菜单，但我不是JavaScript的老板，所以我在互联网上制作了一个现成的下拉菜单，并对此进行了改进。但什么时候我会用它来代替我的

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

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;
    });

} ) ;


$（文档）.ready（函数（）{
//快取菜单
//sauf celui qui porte la classe“装载时打开”：
$（“div.subMenu:not（'.open_at_load'）））.hide（）；
//在“切换子菜单”中选择重要的列表项
//ET在ReLeP'L'元素跨度Quielun-Palon LueN：
/*$（“div.subnumhidden span”）。每个（函数（）{
//关于斯潘城：
var textexpan=$（this.text（）；
$（此）。替换为（“”）；
} ) ;*/
//在“修改”菜单上，单击“删除列表中的项目”
//qui portent la classe“切换子菜单”：
$（“div.subnumhidden>a”）。单击（函数（）{
//请参考以下菜单：
if（$（this）.prev（“div.subMenu:visible”）.length！=0）{
$（此）.prev（“div.subMenu”）.slideUp（“正常”）；
}
//在阿菲什的ferme les autres et上的Si le sous菜单：
否则{
$（“div.subMenu”）.slideUp（“正常”）；
$（this.prev（“div.subMenu”）.slideDown（“normal”，function（）{$（this.next（'a'））.replacetwith（''）；}）；
} 
//关于留置权的航行：
返回false；
});
} ) ;

HTML


图像/照片

视频

谢谢。（抱歉弄错了，我是法国人）

有问题，当dom就绪时，您的JS代码绑定到（单击操作）项，您的JS代码不会对dom更改做出反应。此DOM更改由replaceWith函数检索，最简单的解决方案是将replaceWith函数更改为html，只需更改a-tag内容：）

$（this.prev（“div.subMenu”）.slideDown（“normal”，function（）{$（this.next（'a'）.html（'Voir Moins'）；}）
您确实意识到，您好，谢谢您的回答，我更新了JSFIDLE链接：使用css修改和js修改。你说得对，它是//Si le sous menu est cachée
，但不是//Si le sous menu est cache
    <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;
    });

} ) ;

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