使用div而不是li元素的jQuery下拉列表

Question

使用div而不是li元素

的jQuery下拉列表

我一直在与开发人员合作，在项目上创建一个下拉界面，该项目使用codeigniter框架动态地将内容添加到导航栏。

不幸的是导航并没有使用nav元素中无序列表的传统方法，而是html看起来像这样：

您可以在http://www.jamesbratton.co.uk.gridhosted.co.uk/

看到该项目

我已经能够显示下降，并且按预期消失，但是当我将鼠标悬停在子菜单上时仍然会将元素移到slideUp函数时，悬停是一个问题。

有人可以指出我出错的地方吗？

的index.html

<div id="menu">
    <a class="menu_home center floatleft large white" href="/" title="Home">Home</a>
    <a onmouseover="slideDownDropDown('menu_about-us');" onmouseout="hideDropDown('menu_about-us');" class="cursor-pointer menu_about-us center floatleft large white" title="About Us">About Us</a>
    <a onmouseover="slideDownDropDown('menu_portfolio');" onmouseout="hideDropDown('menu_portfolio');" class="cursor-pointer menu_portfolio center floatleft large white" title="Portfolio">Portfolio</a>
    <a onmouseover="slideDownDropDown('menu_services');" onmouseout="hideDropDown('menu_services');" class="cursor-pointer menu_services center floatleft large white" title="Services">Services</a>
    <a class="menu_contact-us center floatleft large white" href="/contact" title="Contact Us">Contact Us</a>
    <!--menu_about-us, menu_portfolio, menu_services classes are all used in the functions that show/hide other divs, as their id's are reliant on these base classes for show/hide. Jquery needs to add the classes of menu_# to an array. Then on hover query these and if they have a dropdowns_# then show that div.-->                                 
</div>

<div onmouseover="showDropDown('menu_about-us');" onmouseout="hideDropDown('menu_about-us');" class="dropdowns" id="dropdowns_menu_about-us" style="display: none;">
    <a class="menu_history white" href="/history" title="History">History</a>
    <a class="menu_clients white" href="/home" title="Clients">Clients</a>
    <a class="menu_certifications white" href="/home" title="Certifications">Certifications</a>
</div>

<div onmouseover="showDropDown('menu_portfolio');" onmouseout="hideDropDown('menu_portfolio');" class="dropdowns" id="dropdowns_menu_portfolio" style="display: none;">
    <a onmouseover="showSubDropDown(1);" class="bold cursor-pointer white" title="CategoryName2">CategoryName2</a>
    <a onmouseover="showSubDropDown(2);" class="bold cursor-pointer white" title="New Category">New Category</a>
</div>

<div class="dropdowns"  id="dropdowns_menu_projects" style="display: none;">
    <a class="white subdropdown subdropdowns_1" href="/test-project" title="Test Project">Test Project</a>
    <a class="white subdropdown subdropdowns_2" href="/limestone-mill-tickhill" title="Limestone Hill Mill, Tickhill">Limestone Hill Mill, Tickhill</a>
    <a class="white subdropdown subdropdowns_2" href="/case-study-3" title="Case Study 3">Case Study 3</a>
</div>

<div onmouseover="showDropDown('menu_services');" onmouseout="hideDropDown('menu_services');" class="dropdowns" id="dropdowns_menu_services" style="display: none;">
    <a class="menu_contracts white" href="/contracts" title="Contracts">Contracts</a>
    <a class="menu_joinery white" href="/joinery" title="Joinery">Joinery</a>
    <a class="menu_home-building white" href="/home-building" title="Home Building">Home Building</a>
</div>

这只是来自网页源代码的打印输出代码，因为php框架将它的变量放到了适当位置。

正如您可以看到带有id =＆＃34;菜单＆＃34;的div是顶级导航元素，所有其他div都隐藏并代表下拉div。

main.js

function slideDownDropDown(id)
  {
var id;
$('#dropdowns_' + id).slideDown("fast");
$('#menu .' + id).addClass("menu-hover");
  }

function slideUpDropDown(id)
  {
var id;
$('#dropdowns_' + id).slideUp();
$('#menu .' + id).removeClass("menu-hover");
  }

function showDropDown(id)
 {

var id;
$('#dropdowns_' + id).show();
$('#menu .' + id).addClass("menu-hover");
 }

function hideDropDown(id)
 {
if($("#dropdowns_" + id).is(':hover'))
{
return 0;
}
else
{
    var id;
    $('#dropdowns_' + id).slideUp("fast");
    $('#menu .' + id).removeClass("menu-hover");
}
 }


function showSubDropDown(id)
 {
var id;
$('#dropdowns_menu_projects').show();
$('.subdropdown').hide();
$('.subdropdowns_' + id).show();
 }

function hideSubDropDown(id)
{
var id;
$('#dropdowns_menu_projects').hide();
$('.subdropdowns_' + id).hide();
 }