Question

我有这个导航菜单：

<nav id="hoofd_menu">
    <a href="portfolio/" title="Portfolio" target="_self" class="fade portfolio">Portfolio</a>
    <a href="blog/" title="Blog" target="_self" class="fade blog">Blog</a>
    <a href="over/" title="Over" target="_self" class="fade over">Over</a>
    <a href="contact/" title="Contact" target="_self" class="fade contact">Contact</a>
</nav>

和这个功能：

$(document).ready(function(){
            $("a.portfolio").click(function(e) {
                e.preventDefault();
                $('a.blog, a.over, a.contact').hide("slow");
                $(this).animate({"opacity": "1"}, "slow");
                $(this).hide("slow", function(){
                    document.location = $(this).attr('href');
                });
            });
        });

是否可以更改功能代码，使其适用于所有四个链接（不重复）？

该功能慢慢隐藏其他链接，完成后会慢慢隐藏链接本身，并在此之后跟随href。

Answer 1

这个怎么样？您可以使用“锚标记”进行点击事件，然后隐藏其兄弟姐妹。

$(document).ready(function(){
        $("#hoofd_menu a").click(function(e) {
            e.preventDefault();
            $(this).siblings().hide("slow");
            $(this).animate({"opacity": "1"}, "slow");
            $(this).hide("slow", function(){
                document.location = $(this).attr('href');
            });
        });
    });

链接到jsfiddle http://jsfiddle.net/C6fKE/

Answer 2

<nav id="hoofd_menu">
    <a href="portfolio/" title="Portfolio" target="_self" class="fade      portfolio">Portfolio</a>
    <a href="blog/" title="Blog" target="_self" class="fade blog">Blog</a>
    <a href="over/" title="Over" target="_self" class="fade over">Over</a>
    <a href="contact/" title="Contact" target="_self" class="fade contact">Contact</a>
</nav>  

$(document).ready(function(){
    $("a.fade").click(function(e) {
        e.preventDefault();
        var me = $(this),
            rest = $('.fade').not(me).hide('slow');
        me.animate({"opacity": "1"}, "slow");
        me.hide("slow", function(){
            document.location = me.attr('href');
        });
    });
});

Answer 3

您可以使用fade类选择所有内容，但不包括所点击的元素：

$("#hoofd_menu a.fade").click(function(e) {
    e.preventDefault();
    $(this).parent().find('.fade')
                    .filter(':not(a[title="' + $(this).attr('title') + '"])')
                    .hide("slow");
    $(this).animate({
        "opacity": "1"
    }, "slow");
    $(this).hide("slow", function() {
        document.location = $(this).attr('href');
    });
});

See demo

Answer 4

当然，只需使用.not（this）函数从要隐藏的元素列表中删除当前元素。

$(document).ready(function(){
        $("#hoofd_menu > a").click(function(e) {
            e.preventDefault();
            $('#hoofd_menu > a').not(this).hide("slow");
            $(this).animate({"opacity": "1"}, "slow");
            $(this).hide("slow", function(){
                document.location = $(this).attr('href');
            });
        });
    });

这是一个快速的jsFiddle，其中包含更新的代码 - http://jsfiddle.net/GA7ev/1/

Answer 5

$(document).ready(function() {
    $("a.fade").on('click', function(e) {
        e.preventDefault();
        $(this).siblings('a.fade').hide("slow").end().delay("slow").hide("slow", function() {
            document.location = $(this).attr('href');
        });
    });
});

FIDDLE

使代码适用于多个链接

5 个答案:

See demo