![](/img/trans.png)
[英]How do I build a dropdown menu from a dynamically created nested unordered list?
[英]dynamically created menu dropdown not working
我想在javascript中动态创建一个下拉javascript菜单。
我已经从mysql数据库中的php中创建了一个菜单项的javascript数组,现在我想在需要时使用javascript函数即时创建菜单,因此无需使用服务器就可以更新菜单项呼叫。
菜单构建良好并可以加载,但下拉菜单不起作用
这是我的代码
PHP代码创建数组
<script>
var x=0;
var outermenuarray=new Array();
</script>
<?
$sql=mysql_query("SELECT * FROM pages WHERE template_ref='15' ORDER BY menu_pos ASC");
while($row=mysql_fetch_array($sql))
{
?>
<script>
var innermenuarray = new Array();
innermenuarray[0]="<? echo $row['page_ref']; ?>";
innermenuarray[1]="<? echo $row['menu_pos']; ?>";
innermenuarray[2]="<? echo $row['sub_menu_pos']; ?>";
innermenuarray[3]="<? echo $row['top_menu']; ?>";
innermenuarray[4]="<? echo $row['link']; ?>";
innermenuarray[5]="<? echo $row['indexpage']; ?>";
outermenuarray[x]=innermenuarray;
x++;
</script>
<?
}
?>
下拉菜单的CSS
#jsddm{
margin: 0;
padding: 0
}
#jsddm li{
float: left;
list-style: none;
font: 12px Tahoma, Arial
}
#jsddm li a{
display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap
}
#jsddm li a:hover{
background: #1A4473
}
#jsddm li ul{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white
}
#jsddm li ul li{
float: none;
display: inline
}
#jsddm li ul li a{
width: auto;
background: #9F1B1B
}
#jsddm li ul li a:hover{
background: #7F1616
}
菜单的javascript
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
最后是构建菜单的循环
var innermenuhtml;
function createtopmenu(){
innermenuhtml='<ul id="jsddm">';
var t=0;
var s=0;
for(var h = 0; h <outermenuarray.length; h++)
{
if(outermenuarray[h][2]=='0'){
if(t>0){
innermenuhtml+='</li>';
}
t++;
if(s>0){
innermenuhtml+='</ul>';
}
s=0;
innermenuhtml+='<li><a href="#">'+outermenuarray[h][4]+'</a>';
}else{
if(s==0){
innermenuhtml+='<ul>';
s++;
}
innermenuhtml+= '<li><a href="#">'+outermenuarray[h][4]+'</a></li>';
}
}
innermenuhtml+='</ul>';
}
然后,我调用函数以创建菜单并推入div
<div id="topmemnuitem"></div>
<script>
createtopmenu();
$(document).ready(function() {
var el = document.getElementById('topmemnuitem');
el.innerHTML = innermenuhtml;
});
</script>
如果我将循环结果硬编码到菜单中,则下拉列表可以正常工作,但是当我使用循环构建时,下拉列表将无法正常工作
有人知道为什么吗? 我似乎看不到和为什么这不起作用
何时创建菜单? 是在调用绑定之前还是之后?
关于.bind()的jQuery文档:从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法。 对于早期版本,.bind()方法用于将事件处理程序直接附加到元素。 将处理程序附加到jQuery对象中当前选定的元素上,因此这些元素必须在对.bind()的调用发生时存在。 有关更灵活的事件绑定,请参见.on()或.delegate()中有关事件委托的讨论。
=======
采用:
$(document).on('mouseover', '#jsddm > li', jsddm_open);
$(document).on('mouseout', '#jsddm > li', jsddm_timer);
相反,因此#jsddm中每个动态创建的li将被绑定。
=======
我很高兴我可以提供帮助;-)
我已使用@Mark Rijsmus发布的帮助修复了此问题。 基本上我只是搬了
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
到里面
<div id="topmemnuitem"></div>
<script>
createtopmenu();
$(document).ready(function() {
var el = document.getElementById('topmemnuitem');
el.innerHTML = innermenuhtml;
});
</script>
在el.innerHTML = innermenuhtml;之后; 而且效果很好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.