Zwiń element div/element na ekranach urządzeń przenośnych tylko przy użyciu funkcji ładowania początkowego. Przykład pic

Question

Czy można zwinąć div paska bocznego - tylko w telefonach komórkowych - przy użyciu funkcji ładowania początkowego? Jak chciałbym zrobić coś podobnego do przykładu na obrazie? Tak, że w telefonie komórkowym pasek boczny się zawala i po kliknięciu rozszerza się. Nie rozumiem, w jaki sposób zapytania o media pozwoliłyby mi to zrobić, biorąc pod uwagę jquery.

http://i46.tinypic.com/2mzxflu.jpg

Widziałem kilka podobnych pytań na temat tutaj, ale nic nie dokładnie tak. Czy ktoś mógłby wyjaśnić lub przynajmniej wskazać mi właściwy kierunek? Z góry dziękuję.

Answer 1

Szybki i brudny sposób: napisanie kodu pełno wymiarowego paska bocznego, który ma być wyświetlany na ekranach komputerów i osobnych znaczników dla zwiniętego paska bocznego do wyświetlania na urządzeniach mobilnych.

Następnie, aby wybrać, kiedy wyświetlać wersję paska bocznego, należy użyć classes provided by bootstrap do ukrywania i wyświetlania treści na podstawie zapytań o media.

Zwinięty Pasek boczny: .hidden-desktop .hidden-tablet .visible-phone

Pełny pasek boczny: hidden-phone .visible-tablet .visible-desktop

Answer 2

miałem ten sam problem przy użyciu Bootstrap V3. Postępowałem zgodnie z samouczkiem dotyczącym oficjalnej dokumentacji, ale nie udało mi się domyślnie zwinąć paska bocznego w telefonach komórkowych.

To pochodzi od błędu w plikach źródłowych Bootstrap V3 (wersja niestandardowa wygenerowana 2013/09/05). Wystarczy załadować następujące CSS tuż po pierwotnym bootstrap.css:

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease} 
@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}} 

(style te pochodzą z poprzedniej wersji oryginalnego źródła Bootstrap V3).

W przeciwnym razie moim jedynym błędem było zainicjowanie wtyczki collapse na stronie HTML. Więc jeśli masz coś takiego w kodzie źródłowym HTML:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.collapse').collapse(); 
    }); 
</script> 

... a potem po prostu usunąć to i upadek plug-in działa jak czar.

Answer 3

skończyło się natyka tej kwestii i dodaje klasę CSS dla niego:

.collapse-non-md { 
    height: 0; 
    display: none; 
} 
.collapse-non-md.collapsing { 
    display: block; 
} 

@media (min-width: 992px) { 
    .collapse-non-md { 
     height: auto; 
     display: block; 
    } 
} 

Potem ustawić klasę elementu Chciałem upadł na ekranach poniżej średniej do collapse-non-md i voila, to padł na małe przeglądarki i otwarte na średnie. Wciąż można go otwierać i zamykać normalnie (klasa .in przesłania .collapse-non-md).