Forum PHP.pl > [Java][CSS][JavaScript]Dodanie klasy do body przy rozwiniętym menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [Java][CSS][JavaScript]Dodanie klasy do body przy rozwiniętym menu

zafon

15.02.2018, 16:29:22

Witam jak w temacie, chciałbym dodać do body klasę która zablokuje przewijanie strony, dodałem taki kod, ale niestety nie działa ;/

CODE

$(document).ready(function(){
if ( $('.navbar-collapse.justify-content-end.collapse').hasClass('show') ) {
$('body').addClass('blokowaniestrony');
}
});

tak wygląda klasa z rozwiniętym menu :
<div class="navbar-collapse justify-content-end collapse show">
a tak ze zwiniętym
<div class="navbar-collapse justify-content-end collapse ">

chciałbym aby w

body
pojawił sie element
overflow: hidden;

a kiedy toggler się zwinie klasa znikneła lub została nadpisana
visible

Dzięki za pomoc

trueblue

15.02.2018, 16:33:27

To tam gdzie zwijasz/rozwijasz toggler, nadawaj/odejmuj klasę dla <body>.

zafon

15.02.2018, 18:31:44

Kurcze nie bardzo wiem jak to wykonać - czy mógłbyś pokazać kod jak powinien wyglądać?

trueblue

15.02.2018, 18:43:06

http://api.jquery.com/toggleclass/
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/

zafon

16.02.2018, 13:22:46

Kurcze dodałem taki skrypt ale wogóle nie jest on wczytywany ;/

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
  $("button.navbar-toggler").click(function(){
        $("page-template").css({"overflow":"hidden"});
    });
});
[JAVASCRIPT] pobierz, plaintext

Powinno zadziałać tak,że kiedy klikniemy na button navbar-toggler to <body class="page-template"> dostaje overflow:hidden

Dlaczego skrypt się nie wczytuje?

trueblue

16.02.2018, 13:27:09

Bo selektor klasy to .klasa, a nie klasa.

zafon

17.02.2018, 13:45:42

Ok udało się zrobić a kod prezentuje się tak

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function( $ ){
$(".navbar-toggler").click(function() {
$('body').toggleClass('modal-open');
});
});
[JAVASCRIPT] pobierz, plaintext

Musiałem użyć

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function( $ ){
[JAVASCRIPT] pobierz, plaintext

Wykorzystałem klase modal-open, która wykonuje dokładnie to czego potrzebowałem a czy można dodać do toggleClass style css?
aby zadziałał on w Wordpresie.
Pozdrawiam.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.