2

我试图在我的导航菜单的第一个 ul 上使用一个名为 menuFlip 的 jQuery 插件。但出于某种原因，无论我做什么，它都会将 menuFlip 应用于所有子菜单。

这是我用来启动插件的：

$(document).ready(function() {
    $('ul:first-child').menuFlip();
});

这是导航菜单的实际 HTML：

<div id="navigation-menu">
<ul id="flip_nav">
    <li class="main-li"><a href="/home">Home</a></li>
    <li class="main-li"><a href="/page/202624/about" class="dropdown">Community</a>
      <ul class="sub-menu">
       <li><a href="#">Information</a></li>
       <li><a href="#">Rosters</a></li>
      </ul> 
    </li>
    <li class="main-li"><a href="/forums" class="dropdown">Forums</a></li>
    <li class="main-li"><a href="/join" class="dropdown">Join</a></li>
    <li class="main-li"><a href="/generalgamingnews" class="dropdown">Content</a></li>
    <li class="main-li"><a href="/calendar" class="dropdown">Events</a></li>
    <li class="main-li"><a href="teamsg" class="dropdown">Competitive</a></li>
    <li class="main-li"><a href="/livestream">Live Streams</a></li>
    <li class="main-li"><a href="/store">Store</a></li>
</ul>
</div>
4

6 回答 6

2 
$(document).ready(function() {
    $('ul:first-of-type').menuFlip();
});

请注意，这只是从 jQuery 1.9 添加的。

编辑：当然它适用于 sumenus。他们在你打电话的那个里面。

解决方案

我不得不对插件本身进行一些更改。我不明白为什么这个插件的创建者没有从一开始就以这种方式构建它 - 或者至少给你一个启用/禁用孩子的选项。无论如何，所有的孩子都是有针对性的（find()），所以我不得不改变一些事情。这是一个小提琴：http: //jsfiddle.net/e2ST7/2

jQuery

/**
 * jQuery menuFlip plugin
 *
 * Copyright (c) 2011 Garrett Grimm (grimmdude.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Edited by Bram Vanroy for use for one level menu
 *
 */

(function ($) {
    $.fn.menuFlip = function (options) {

        var settings = $.extend({
            'li_height': '20px',
                'flip_speed': 150,
                'flipped_class': 'flipped_item'
        }, options);

        // Set required CSS
        this.children('li').css({
            'overflow': 'hidden',
                'height': settings.li_height
        });

        this.children('li > a').css({
            'display': 'block'
        });

        // For each list item set the child 'a' line height to match the li height and duplicate
        this.children('li').children('a').each(function () {
        // Direct child selector does not seem to be working. Needs review
            $(this)
                .css('line-height', settings.li_height)
                .clone()
                .appendTo($(this).parent())
                .addClass(settings.flipped_class);
        });

        // When list item is hovered slide up to expose the flipped link
        this.children('li').hover(function () {
            var negative_height = '-' + settings.li_height;

            $(this).children('li > a:first').animate({
                marginTop: negative_height
            }, settings.flip_speed);
        },

        function () {
            $(this).children('li > a:first').animate({
                marginTop: '0px'
            }, settings.flip_speed);
        });
    };
})(jQuery);

$('ul#flip-nav').menuFlip();
于 2013-05-03T08:24:52.890 回答
1

Use $('ul:first') or $('ul').first()

于 2013-05-03T08:26:54.447 回答
1

尝试这个：

$('#flip_nav ul:first').menuFlip();
于 2013-05-03T08:29:36.710 回答
1

利用 ：

$(document).ready(function() {
   $('ul#flip_nav').menuFlip();
});
于 2013-05-03T08:19:26.650 回答
1

你正在这样做 - （这里http://www.sentinelgaming.net/testpage）

$('#flip_nav ul:first').menuFlip();

你想要翻转#flip_nav的本身在哪里，将进入你不想要的内部。ul#flip_nav ul:firstul

尝试这个 -

$('#flip_nav').menuFlip(); // #flip_nav is unique right ?
于 2013-05-03T08:37:52.797 回答
1

该插件的问题在于它将效果应用于所有父级<li>和<a>父级内部。一个简单的解决方法是在插件本身中更改它，例如<a>在函数中应用一个类并忽略该类。

<li><a href="#" class='ignore'>Information</a>

以及 menuFlip.js 的一部分

        $(this).find('li').hover(function () {
            var negative_height = '-' + settings.li_height;

            $(this).find('a:first:not(.ignore)').animate({
                marginTop: negative_height
            }, settings.flip_speed);
        },

        function () {
            $(this).find('a:first:not(.ignore)').animate({
                marginTop: '0px'
            }, settings.flip_speed);
        });

请参阅小提琴进行更改

于 2013-05-03T09:00:19.630 回答