Question

我不明白为什么<link rel="alternate" hreflang="en" href="{your_href_to_the_same_page_on_en}" /> <link rel="alternate" hreflang="fr" href="{your_href_to_the_same_page_on_fr}" />，show不起作用，请检查一下。我没看错

fadeIn

$(document).ready(function () {
    $('div[data-v]').on('click', function () {
        var that = this;
        var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');

        if (list != 'undefined' || list != null || list.length != 0) {
            list.each(function () {
                var that = this;

                //if ($(that).hasClass('d-none')) {
                if ($(that).css('display') == "none") {
                    $(that).show().fadeIn("slow");
                    //$(that).removeClass('d-none').addClass('d-block'); 
                    console.log('tutaj sie pokazujemy', that);
                    //$(that).show().fadeTo("slow", 1); 
                } else {
                    //$(that).removeClass('d-block').addClass('d-none');
                    $(that).hide().fadeOut("slow");
                    console.log('tutaj sie chowamy', that);
                    //$(that).hide().fadeTo("slow", 0); 
                    lookUpForChildrens(that);
                }
            });
        }
    });

    function lookUpForChildrens(that) {
        var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');
        if (list != 'undefined' || list != null || list.length != 0) {
            list.each(function () {
                var that = this;
                //if ($(that).hasClass('d-block')) {
                if ($(that).css('display') == "block") {
                    //$(that).removeClass('d-block').addClass('d-none');
                    $(that).hide().fadeOut("slow");
                    console.log('tutaj chowaja sie dzieciaki', that);
                    //$(that).hide().fadeTo("slow", 0); 
                    lookUpForChildrens(that);
                }
            });
        }
    }
});

.font {
    font-family: Raleway;
}

.logo-nav {
    position: absolute;
    top: 0;
    right: 95%;
    width:75px;
    z-index: 999;
}

.nav-center {
    display: flex;
    justify-content: center;
}

.kuguar-sport-color {
    background-color: #E31E24;
}

Answer 1

您应该在fadeIn和fadeOut函数的complete回调（https://api.jquery.com/show/#show-duration-complete）中调用show和hide。或尝试使用slideDown和slideUp jQuery方法。

$(document).ready(function () {
    $('div[data-v]').on('click', function () {
        var that = this;
        var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');

        if (list != 'undefined' || list != null || list.length != 0) {
            list.each(function () {
                var that = this;

                //if ($(that).hasClass('d-none')) {
                if ($(that).css('display') == "none") {
                    $(that).show(400, function() {$(that).fadeIn("slow");});
                    //$(that).removeClass('d-none').addClass('d-block'); 
                    console.log('tutaj sie pokazujemy', that);
                    //$(that).show().fadeTo("slow", 1); 
                } else {
                    //$(that).removeClass('d-block').addClass('d-none');
                    $(that).fadeOut("slow", function() {$(that).hide();});
                    console.log('tutaj sie chowamy', that);
                    //$(that).hide().fadeTo("slow", 0); 
                    lookUpForChildrens(that);
                }
            });
        }
    });

    function lookUpForChildrens(that) {
        var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');
        if (list != 'undefined' || list != null || list.length != 0) {
            list.each(function () {
                var that = this;
                //if ($(that).hasClass('d-block')) {
                if ($(that).css('display') == "block") {
                    //$(that).removeClass('d-block').addClass('d-none');
                    $(that).hide().fadeOut("slow");
                    console.log('tutaj chowaja sie dzieciaki', that);
                    //$(that).hide().fadeTo("slow", 0); 
                    lookUpForChildrens(that);
                }
            });
        }
    }
});

.font {
    font-family: Raleway;
}

.logo-nav {
    position: absolute;
    top: 0;
    right: 95%;
    width:75px;
    z-index: 999;
}

.nav-center {
    display: flex;
    justify-content: center;
}

.kuguar-sport-color {
    background-color: #E31E24;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="main-nav">
    <div class="row text-center"><div class="col" data-v="138"><a href="#"> Aktualności</a></div><div class="col" data-v="139"><a href="#"> O nas</a></div><div class="col" data-v="140"><a href="#"> Rowery</a></div></div><div class="row text-center"><div style="display: none;" class="col" data-p="140" data-v="368"><a href="#"> Górskie</a></div><div style="display: none;" class="col" data-p="140" data-v="369"><a href="#"> Miejskie</a></div><div style="display: none;" class="col" data-p="140" data-v="370"><a href="#"> Dziecięce</a></div></div><div class="row text-center"><div style="display: none;" class="col" data-p="368" data-v="371"><a href="#"> testgorskie</a></div><div style="display: none;" class="col" data-p="368" data-v="374"><a href="#"> testgorskie1-1</a></div><div style="display: none;" class="col" data-p="368" data-v="375"><a href="#"> testgorskie1-2</a></div></div><div class="row text-center"><div style="display: none;" class="col" data-p="371" data-v="372"><a href="#"> testgorskie2</a></div></div><div class="row text-center"><div style="display: none;" class="col" data-p="372" data-v="373"><a href="#"> testgorskie3</a></div></div>
</nav>

jQuery显示和淡入

1 个答案: