0

私はこのナビゲーションメニューを持っています：

<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');
                });
            });
        });

4つのリンクすべてで機能するように機能コードを変更することは可能ですか（重複することなく）？

この関数は他のリンクをゆっくりと非表示にし、これが終了すると、リンク自体をゆっくりと非表示にし、この後、hrefに従います。

4

5 に答える 5

2

これはどう？クリックイベントに「アンカータグ」を使用して、その兄弟を非表示にすることができます。

$(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/

于 2012-04-07T13:42:58.013 に答える
0 
<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');
        });
    });
});
于 2012-04-07T13:45:49.433 に答える
0

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');
    });
});​

デモを見る

于 2012-04-07T13:46:07.983 に答える
0

もちろん、.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/

于 2012-04-07T13:47:15.483 に答える
0 
$(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');
        });
    });
});​

フィドル

于 2012-04-07T13:50:56.943 に答える