2012-07-14 78 views
0

单击lihref时,应打开菜单。这是一个包含在div中的ul和多个li的水平菜单。可以用多个ul来完成,但我宁可不要,因为它代码太重。菜单切换不起作用jquery

HTML

<ul id="mainmenu" style="width:720px"> 

    <!-- 1Open --> 
      <li id="mainmenudrop"><a href class="drop">helloooo</a> 
      <div style="width:200px height:40px; background:#000000;">hmmmmfyhyf 
</div> 
     </li> 
    <!-- 1 Close --> 
    <!-- 2nd Open --> 
     <li><a href="" class="drop">hello</a> 
      <div style="width100px; height:40px; background:#000000;"> 
       yhythyytyt 
       </div> 
      </div></li> 
    <!-- 2nd Close --> 
</ul> 

的jQuery:

$(function() { 
    var toggleMenu = function(e) { 
     var self = $(this), 
      elemType = self[0].tagName.toLowerCase(), 
      //get caller 
      menu = null; 
     if (elemType === 'a') { 
      //anchor clicked, nav back to containing ul 
      menu = self.parents('li').not('li#mainmenudrop'); 
     } else if (elemType === 'li') { 
      //mouseleft ul, ergo menu is this. 
      menu = self; 
     } 
     if (menu) { 
      menu.hide('medium'); 
     } 
     e.preventDefault(); 
     return false; 
    }; 
    $(document).ready(function() { 
     $('href.drop').click(function(e) { 
      $('li#mainmenudrop li').show('medium'); 
      console.log('div clicked'); 
      e.preventDefault(); 
      return false; 
     }); 
     $('li#mainmenudrop a').click(toggleMenu); 
     $('li#mainmenudrop li').mouseleave(toggleMenu); 
    }); 
}); 

回答

0

比它需要你做这个有很多困难。

你也有问题,你的标记和JS

href.drop应该已经a.drop

也是一个额外的结束div

但是那一切,除了这一点,你并不需要所有这些JS代码

http://jsfiddle.net/DTqDD/

注意:您还需要做出某种类型的秋天回用JavaScript关闭用户。

+0

该div只是弹出打开rathen然后幻灯片,如果在浏览器中禁用JavaScript不只是使用正常的悬停效果而不是? – david 2012-07-14 16:06:35

+0

@topdown请在帖子中包含您答案的代码。没有这个代码,你的帖子就没用了。如果这个链接404,你的帖子是无用的。 – 2012-07-15 00:40:14