动态生成列表的Javascript下拉列表
我不知道从哪里开始。我使用wordpress自动生成菜单项列表,因此无法将鼠标指针硬编码到html中。如何将列表设置为下拉列表 我试图修改一个教程并使用类似的东西,但它不起作用。我真的不知道如何动态地抓取这些菜单并更改它们。Lil帮助?:动态生成列表的Javascript下拉列表,javascript,html,drop-down-menu,Javascript,Html,Drop Down Menu,我不知道从哪里开始。我使用wordpress自动生成菜单项列表,因此无法将鼠标指针硬编码到html中。如何将列表设置为下拉列表 我试图修改一个教程并使用类似的东西,但它不起作用。我真的不知道如何动态地抓取这些菜单并更改它们。Lil帮助?: window.onload = initAll; function initAll() { var allLinks = document.getElementsByTagName("li"); for (var i=0; i<all
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("li");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menu-item") > -1) {
allLinks[i].onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
document.getElementById(thisMenuName).style.display = "block";
}
window.onload=initAll;
函数initAll(){
var allLinks=document.getElementsByTagName(“li”);
对于(var i=0;i
这里是一个简单的CSS版本。不幸的是,它依赖于“hover”伪类,而非
#菜单顶部导航{
边框:1px纯红;
}
#菜单顶部导航李{
位置:相对位置;
}
#菜单顶部导航ul.子菜单{
边框:1px纯绿色;
背景:黄色;
显示:无;
位置:绝对位置;
顶部:0px;
左:100px;
z指数:1;
}
#菜单顶部导航>li:悬停ul.子菜单{
显示:块;
}
这是一个JS版本
<div class="menu-header"><ul id="menu-top-nav" class="menu"><li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-82"><a href="http://localhost/wordpress/">HOME</a></li>
<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://localhost/wordpress/about-ql/">About QL+</a>
<ul class="sub-menu">
<li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://localhost/wordpress/about-ql/ql-laboratory/">QL+ LABORATORY</a></li>
<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://localhost/wordpress/about-ql/ql-leadership/">QL+ LEADERSHIP</a></li>
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://localhost/wordpress/about-ql/a-history-of-ql/">A HISTORY OF QL+</a></li>
<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://localhost/wordpress/about-ql/fighting-for-life-the-film/">FIGHTING FOR LIFE, THE FILM</a></li>
</ul>
</li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://localhost/wordpress/our-work/">Our Work</a>
<ul class="sub-menu">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://localhost/wordpress/our-work/what-is-a-ql-challenge/">WHAT IS A QL+ CHALLENGE?</a></li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://localhost/wordpress/our-work/successful-ql-projects/">SUCCESSFUL QL+ PROJECTS</a></li>
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://localhost/wordpress/our-work/projects-in-development/">PROJECTS IN DEVELOPMENT</a></li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://localhost/wordpress/our-work/submit-a-ql-challenge/">SUBMIT A QL+ CHALLENGE</a></li>
<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://localhost/wordpress/our-work/hear-from-ql-supporters/">HEAR FROM QL+ SUPPORTERS</a></li>
</ul>
</li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/wordpress/help-ql-help-our-heroes/">WAYS TO GIVE</a>
<ul class="sub-menu">
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://localhost/wordpress/help-ql-help-our-heroes/donate-to-ql/">DONATE TO QL+</a></li>
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://localhost/wordpress/help-ql-help-our-heroes/sponsorships/">SPONSORSHIPS</a></li>
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://localhost/wordpress/help-ql-help-our-heroes/get-involved-volunteer/">VOLUNTEER!</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://localhost/wordpress/help-ql-help-our-heroes/ql-partners/">QL+ PARTNERS</a></li>
<li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://localhost/wordpress/help-ql-help-our-heroes/ql-resources/">QL+ RESOURCES</a></li>
</ul>
</li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost/wordpress/whats-happening/">WHAT’S HAPPENING</a>
<ul class="sub-menu">
<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"><a href="http://localhost/wordpress/whats-happening/press-releases/">Press Releases</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://localhost/wordpress/whats-happening/ql-in-the-news/">QL+ IN THE NEWS</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://localhost/wordpress/whats-happening/upcoming-events/">UPCOMING EVENTS</a></li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://localhost/wordpress/whats-happening/special-events/">PREVIOUS EVENTS</a></li>
</ul>
</li>
<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://localhost/wordpress/contact-ql/">CONTACT QL+</a></li>
</ul></div>
#menu-top-nav {
border:1px solid red;
}
#menu-top-nav li {
position:relative;
}
#menu-top-nav ul.sub-menu {
border:1px solid green;
background:yellow;
display:none;
position:absolute;
top:0px;
left: 100px;
z-index:1;
}
#menu-top-nav > li:hover ul.sub-menu {
display:block;
}