与jquery的css菜单

Question

无法让我的菜单与此脚本一起工作真的尝试过任何想法吗？ div有一个悬停的背景图像，然后jquery做点击发布li菜单...是悬停功能搞砸了吗？

<div class="top_menu"> 
    <div class="top_menu_menub"> 
     <ul id="menu"> 
      <li class="sub"> 
       <ul> 
        <li><a href="">Control Center</a></li> 
        <li><a href="">APEC Trinity</a></li> 
        <li><a href="">APEC Living</a></li> 
        <li><a href="">APEC Energy</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>​ 

的jQuery：

$(function() { 
    $(document).ready(function() { 
     $('li').click(function(e) { 
      var $this = $(this); 
      var ulId = $this.attr("href"); 
      var clicked_menu_is_visible = $this.parent().find("ul" + ulId).filter(':visible').length > 0; 
      var visible_uls = $this.parent().find("ul").filter(':visible'); 
      if (visible_uls.length === 0) { //no menus showing - just show clicked menu 
       $ul = $this.parent().find("ul" + ulId); 
       $ul.slideToggle('medium'); 
      } 
      else { //close open menus (should only be one open) then open clicked menu 
       //via callback 
       $this.parent().find("ul").filter(':visible').slideUp("medium", function() { 
        $ul = $this.parent().find("ul" + ulId); 
        //open clicked menu - unless menu was already open when clicked 
        if (!clicked_menu_is_visible) { 
         $ul.slideToggle('medium'); 
        } 
       }); 
      } 
      console.log($(this).children()[0].innerText); 
      e.preventDefault(); 
      return false; 
     }); 
    }); 
});​ 

CSS：

.top_menu_menub { 
    padding: 3px 0px 0px 0px; 
    width: 200px; 
    float: left; 
    height: 20px; 
    text-align: left; 
    font-family: Helvetica, sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    color: #aaa; 
    background-image: url(../images/apecbuttona.jpg); 
    background-repeat: no-repeat; 
    background-position: 8px 4px; 
    cursor: pointer; 
} 
#menu { 
    list-style-type: none; 
    width: 200px; 
    padding: 0; 
    margin: 0 auto; 
    height: 24px; 
} 
#menu ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    border: solid 1px#eee; 
    border-radius: 5px; 
} 
#menu li { 
    float: left; 
    margin: 1px 1px 0 0; 
    position: relative; 
    z-index: 9999 
} 
#menu li.sub { 
    width: 200px; 
    height: 16px; 
    padding: 1px 0px 0px 0px; 
} 
#menu li.sub:hover { 
    color: #00CCFF; 
    background-image: url(../images/apecbutton.jpg); 
    background-repeat: no-repeat; 
    background-position: 8px 0px; 
    height: 24px; 
} 
#menu li a { 
    display: block; 
    color: #999; 
    font-family:arial, sans-serif; 
    font-size:11px; 
    line-height:23px; 
    width:107px; 
    text-decoration:none; 
    text-align:left; 
    cursor:pointer; 
    font-weight:100; 
    border-bottom: 1px solid # eee; 
    padding-left: 8px; 
} 
#menu li a:hover { 
    background: #fff; 
    color: #4FA4F9; 
} 
#menu ul { 
    position: absolute; 
    left: -9800px; 
    width: 115px; 
} 
#menu li.click { 
} 
#menu li.click ul { 
    left: 12px; 
    top: 22px; 
    background: #fff; 
} 
/* the background image is for IE7 */ 

​ 

Answer 1

你的点击处理程序捕获点击事件<li class="sub">。我不知道这是否是您想要的，但它具有确保$this.attr("href")始终返回undefined的副作用，因为li元素缺少该属性。

这导致var ulId未定义的问题，这反过来导致$ul永远是一个空的jQuery对象的问题，所以没有其他事情发生。

此外，您的CSS导致一切最初不可见或停在屏幕左侧9800px。你的意思是最初看到的东西，所以用户知道在哪里点击或悬停？

请在你的问题中澄清你期待的行为。

更新：下面

每澄清，是你的jQuery代码修改成你想要的东西：

$(function() { 
    var toggleMenu = function(e) { 
     var $this = $(this), 
      ulId = $this.attr("href") || $this.find('a').attr("href"), 
      $ul = $this.parents("ul").filter("ul#" + ulId), //cache query 
      $all = $("ul#menu ul"), //cache query 
      clicked_menu_is_visible = $ul.is(':visible'), //changed .filter to .is 
      visible_uls = $all.is(':visible'); //changed .filter to .is 
     if (!visible_uls) { //no menus showing - just show clicked menu 
      $ul.slideToggle('medium'); 
     } 
     else { //close open menus (should only be one open) then open clicked menu via callback 
      $all.filter(':visible').slideUp("medium", function() { 
       //open clicked menu - unless menu was already open when clicked 
       if (!clicked_menu_is_visible) { 
        $ul.slideToggle('medium'); 
       } 
      }); 
     } 
     console.log('hideMenu triggered'); 
     e.preventDefault(); 
     return false; 
    }; 
    $(document).ready(function() { 
     $('div.top_menu_menub').click(function(e) { 
      $('ul#menu ul').show('medium'); 
      console.log('div clicked'); 
      e.preventDefault(); 
      return false; 
     }); 
     $('li.sub li, ul#menu a').click(toggleMenu); 
     $('ul#menu ul').mouseleave(toggleMenu); 
    }); 
});​ 

这与您的HTML结构和CSS。 Working fiddle here。

作为一个方面说明，我反而把它写成如下：

$(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('ul').not('ul#menu'); 
     } else if (elemType === 'ul') { 
      //mouseleft ul, ergo menu is this. 
      menu = self; 
     } 
     if (menu) { 
      menu.hide('medium'); 
     } 
     e.preventDefault(); 
     return false; 
    }; 
    $(document).ready(function() { 
     $('div.top_menu_menub').click(function(e) { 
      $('ul#menu ul').show('medium'); 
      console.log('div clicked'); 
      e.preventDefault(); 
      return false; 
     }); 
     $('ul#menu a').click(toggleMenu); 
     $('ul#menu ul').mouseleave(toggleMenu); 
    }); 
});​ 

这也适用于你的HTML结构。 Working fiddle here。