Question

从这个

中获取灵感

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

我从头开始制作了自己的产品，因为我需要为客户提供这种智能下拉解决方案，但更轻巧，更轻松。高效！

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

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

因为这是一个证明概念，所以很高兴知道，在将它移植到插件之前，你会怎么想呢！

好，坏，或者可以改进或缩小尺寸！？

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

PS：在IE6 +，Firefox中完美运行， Chrome，Opera当然还有支持 jQuery Theme Roller并且没有配置步骤！

谢谢你们！

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()和siblings()。

喜欢这里：

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

此外，当您首次将鼠标悬停在菜单项上时，会发生一点点慢跑。我认为这是因为悬停的物品正在到达之前没有一个的边界。

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

整体看起来很不错。

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

1 个答案: