[英]drop-down menu JS [easy]
I am making a drop-down menu for my Website but I am not a boss in JavaScript so I take a ready-made drop-down menu in Internet and I improve that. 我正在为我的网站制作一个下拉菜单,但我不是JavaScript的老板,所以我在Internet上使用了现成的下拉菜单,并且对此进行了改进。 But when I would it replace my 但是当我替换它的时候
<a href="" title="Afficher le sous-menu">Voir Plus</a>
It work but when I click again on this links, the script no longer works. 它可以工作,但是当我再次单击此链接时,脚本不再起作用。
The example here : http://jsfiddle.net/LZfY3/5/ . 此处的示例: http : //jsfiddle.net/LZfY3/5/ 。 And the code: 和代码:
CSS 的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 的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 的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>
Thanks. 谢谢。 (sorry for mistake, I am French) (对不起,我是法国人)
There is problem, your JS code bind to (click action) to items when dom is ready, your JS code not react to DOM changes. 有一个问题,当dom准备就绪时,您的JS代码将绑定(单击操作)到项目上,您的JS代码对DOM更改没有反应。 This DOM changes are retrieved your replaceWith function, easiest solution is change your replaceWith function to html and simply change a-tag content :) DOM更改是通过您的replaceWith函数获取的,最简单的解决方案是将您的replaceWith函数更改为html并简单地更改a-tag内容:)
$(this).prev("div.subMenu").slideDown("normal", function() {$(this).next('a').html('Voir Moins');});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.