Czy można rozwinąć menu rozwijane na Bootstrap na Twitterze?

Próbuję uzyskać standardowe menu rozwijane na pasku nawigacyjnym na Bootstrap na Twitterze, aby zaniknąć, zamiast tylko się pojawić. Próbowałem dodać klasy fade i in, ale nie wydaje się zanikać. Oto moje skrzypce http://jsfiddle.net/byronyasgur/5zr4r/10/.Czy można rozwinąć menu rozwijane na Bootstrap na Twitterze?

Próbowałem już o tym rozmawiać w inny sposób - np. Odpowiedź na this question, ale z jakiegoś powodu mam problem z wyzwoleniem spustu z jquery.

Źródło

2012-12-11 byronyasgur

Zabawa z tym, wygląda na to, że animacje CSS działają najlepiej.

.open > .dropdown-menu { 
    animation-name: slidenavAnimation; 
    animation-duration:.2s; 
    animation-iteration-count: 1; 
    animation-timing-function: ease; 
    animation-fill-mode: forwards; 

    -webkit-animation-name: slidenavAnimation; 
    -webkit-animation-duration:.2s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-fill-mode: forwards; 

    -moz-animation-name: slidenavAnimation; 
    -moz-animation-duration:.2s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: ease; 
    -moz-animation-fill-mode: forwards; 
} 
@keyframes slidenavAnimation { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 
@-webkit-keyframes slidenavAnimation { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
}

Możesz dodać inne właściwości CSS, aby tworzyć bardziej skomplikowane animacje. Na przykład, grałem z lewej: -30 -> lewy: 0.

Źródło

2013-03-19 20:10:46

nie mamy czasu, aby to przetestować w chwili obecnej, więc przepraszam, że nie chcę dać ci kleszczy, ale wspaniale jest widzieć, że pozornie można to zrobić bez JavaScriptu. Dzięki – byronyasgur

znowu nie testowałem tego, ale z głosów wydaje się, że to musi działać i oczywiście css jest lepsze, więc słyszę zaznaczenie – byronyasgur

Nie jestem pewien, dlaczego ktoś nie testuje rozwiązania, czego potrzebuje. –

Może robi coś takiego z jQuery:

$(function() { 
    $('.dropdown-toggle').click(function() { 
     $(this).next('.dropdown-menu').fadeToggle(500); 
    }); 
});

Możesz chek skrzypce tutaj: http://jsfiddle.net/5zr4r/15/

UPDATE: zapomniałem powiedzieć, że należy usunąć fadein z ul.

Źródło

2012-12-11 23:08:45 Dim13i

Dzięki tak, że jest to krok we właściwym kierunku. Wpływa na wszystkie dropdowns w tej chwili, ale jestem pewien, że mogę go zmodyfikować za pomocą $ (this) ... innym problemem jest to, że nie anuluje kiedy klikam poza obszarem, ale jestem pewien, że mogę to na zewnątrz ... dzięki – byronyasgur

Nie ma za co! Zaktualizowałem swoją odpowiedź, aby wpłynęła tylko na odpowiednie rozwijane menu. – Dim13i

Dzięki ... właściwie, chociaż napisany przeze mnie kod działa świetnie, może być coś złego w renderowaniu tekstu tutaj na przepełnieniu stosu ... ponieważ kiedy skopiowałem ten blok, zawiodłem stronę, ale kiedy Po prostu skopiowałem przez środkową linię, że zadziałało dobrze ...Myślę, że ma to coś wspólnego z ostatnimi dwiema linijkami, nie mogę tego zrozumieć, ale możesz chcieć spojrzeć na to w ramach edycji, aby zobaczyć, czy w postach są jakieś dziwne postacie. Jeśli nie możesz go znaleźć, jestem pewien, że każdy przyszły użytkownik może wpisać w ciągu ostatnich dwóch linii, a nie skopiować go. Jeszcze raz dziękuję – byronyasgur

Można spróbować:

// Add fadeToggle animation to dropdown  
$('.dropdown').on('show.bs.dropdown', function(e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
}); 

// Add fadeToggle animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
});

wykorzystuje się istniejące show.bs.dropdown i hide.bs.dropdown funkcje Bootstrap i zmienia efekt rozwijaną do " zaniknąć "pojawi się" zamiast ". Możesz także zmienić fadeToggle() na slideDown(), jeśli chcesz zastosować "slajd". Mam nadzieję że to pomoże.

Oto skrzypce: http://jsfiddle.net/ck5c8/

Źródło

2014-01-29 21:40:07

Proszę wyjaśnić, w jaki sposób rozwiązuje to problem, aby pomóc przyszłym użytkownikom w zrozumieniu tego pytania. – War10ck

Zaktualizowałem kod i wyjaśniłem lepiej, w jaki sposób rozwiązuje problem w ramach PO. –

znalazłem rozwiązanie zbyt miły:

// Add slideDown animation to dropdown 
$('.dropdown').on('show.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
}); 

// Add slideUp animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
});

Przykład: http://codepen.io/danielyewright/pen/EvckL

Źródło

2015-01-02 21:15:54 Nerjuz

Chciałbym przedstawić nowoczesne, CSS-tylko podejście:

.dropdown-menu.fade { 
    display: block; 
    opacity: 0; 
    pointer-events: none; 
} 
.open > .dropdown-menu.fade { 
    pointer-events: auto; 
    opacity: 1; 
}

Dzięki temu .fade może obsługiwać tra nsition animation, ale .open jest tym, co kontroluje stan krycia i wskaźnika.

Źródło

2015-10-12 21:20:44

Najlepsza odpowiedź, szybka, łatwa i skuteczna: D –

Ta odpowiedź jest bardziej skuteczna niż wybrana odpowiedź udzielona przez @Benjamina. Po prostu upewnij się, że dodajesz klasę ".fade" do tego samego elementu, co klasa ".dropdown-menu". - Obsługuje zanikanie i zanikanie, wybrany tylko zanika i natychmiast znika zaraz po zbliżeniu. - Ta odpowiedź to mniej kodu. –

Mały uszczypnąć, aby Jason Featheringham na answer który działa w Bootstrap 4.

.dropdown-menu.fade { 
    display: block; 
    opacity: 0; 
    pointer-events: none; 
} 

.show > .dropdown-menu.fade { 
    pointer-events: auto; 
    opacity: 1; 
}

Źródło

2017-12-27 05:18:11 Stu

Czy można rozwinąć menu rozwijane na Bootstrap na Twitterze?

Odpowiedz

Powiązane problemy