jQuery - 改进/减少我的 iPod 风格的下拉代码！ - 挑战？

Question

从中汲取灵感

http://www.filamentgroup.com/examples/menus/ipod .php

我从头开始制作了自己的解决方案，因为我需要为客户提供这个聪明的下拉解决方案，但更轻量级和更简单。高效的！

所以我手里拿着一杯好咖啡，做了这个

• 演示： http://so.lucafilosofi.com/jquery-improve-reduce-my-ipod-style-dropdown-code-challenge/

因为这是一个概念证明，在将其移植到之前，很高兴知道一个插件，你觉得怎么样！

是好是坏还是可以改进或缩小尺寸！？

我很高兴与您分享此代码，如果您想给我任何反馈，我会很高兴！ ;-)

PS：在 IE6+、Firefox、 Chrome、Opera，当然还有支持 jQuery 主题滚轮并且具有零配置步骤！

谢谢你们！

Answer 1

看起来不错。

我想说的一件事是，如果您要多次使用 jQuery 对象，则应该尝试将它们存储在变量中，并尝试利用链接。

就像代码开头这样：

var $ipod_box = $('.ipod_select_box');      // Stored reference

$ipod_box.addClass('ui-widget-content ui-corner-all')        // Used chaining
         .find('ul:eq(0)').attr('class' , 'ipod_main_ul');

$ipod_box.find('li a:eq(0)').attr('class'...

还有这样：

var $ipod_box_a = $ipod_box.find('ul li a');      // Stored reference

$ipod_box_a.each( function(e) {
    $th = $(this);                     // Stored reference
    if ( $th.next().is('ul') ) {
        $th.next().attr('class','ipod_sub').hide();
...

$ipod_box_a.hover( ...

另外，在几个地方，您可以同时使用 prevAll() 和 prevNext() ，而您可以只使用兄弟姐妹()。

就像这里一样：

$ipod_li.siblings().hide();    // siblings() instead of prevAll() nextAll()

此外，当您第一次将鼠标悬停在菜单项上时，会发生一点点向下的情况。我认为这是因为悬停的项目正在获得一个边框，而之前没有边框。

您可能需要重新调整所有菜单项的大小，以便它们都可以具有与背景颜色匹配的边框。然后，当您将鼠标悬停在其中一个上时，您只是改变了它的颜色。

不过整体看起来不错。