Dodanie klasy do body przy rozwiniętym menu

Dodanie klasy do body przy rozwiniętym menu

Wątek przeniesiony 2018-02-16 05:26 z Java przez Patryk27.

ZA
  • Rejestracja:około 7 lat
  • Ostatnio:prawie 7 lat
  • Postów:12
0

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

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

tak wygląda klasa z rozwiniętym menu :

a tak ze zwiniętym

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

edytowany 1x, ostatnio: Patryk27
Patryk27
Java to nie JS ;-)
Patryk27
Moderator
  • Rejestracja:prawie 18 lat
  • Ostatnio:prawie 2 lata
  • Lokalizacja:Wrocław
  • Postów:13042
0

Twój kod sprawdza tylko raz (na początku działania skryptu) czy navbar ma daną klasę (czyli gdy navbar będzie miał tę klasę na przykład dopiero po kilku sekundach od otworzenia strony, Twój kod tego nie wykryje).


ZA
  • Rejestracja:około 7 lat
  • Ostatnio:prawie 7 lat
  • Postów:12
0

Java to nie JS ;-) - Patryk27
Przepraszam za błędny dział, czy istnieje osobny dział JQ?

Kurcze nie bardzo wiem jak się za to zabrać i czy próbuje użyć właściwej klasy w momencie rozwinięcia button odpowiedzialny za to ma taką klasę

Kopiuj
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="true" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

i wtedy chciałbym aby body dostało dodatkową klasę, a zwinięty występuje w takiej postaci

Kopiuj
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

i tutaj aby została ta klasa zdjęta z body

Zmienia się również div navbar - tutaj jak jest menu zwinięte

Kopiuj
<div class="navbar-collapse justify-content-end collapse " >

a tutaj jak menu rozwinięte

Kopiuj
<div class="navbar-collapse justify-content-end collapse show" >

Czy jest to obojętne, której klasie będę nadawał warunek?
Znacie jakieś przykłady jak powinien wyglądać taki zapis, dzięki za odpowiedzi. Pozdrawiam

edytowany 7x, ostatnio: zafon
ZA
  • Rejestracja:około 7 lat
  • Ostatnio:prawie 7 lat
  • Postów:12
0

Dobra panowie udało się kod wygląda tak

Kopiuj
jQuery(document).ready(function( $ ){
$(".navbar-toggler").click(function() {
$('body').toggleClass('modal-open');
});
});

Żeby Jquery zadziałało w Wordpresie musiałem dodać

Kopiuj
jQuery(document).ready(function( $ ){

Jeszcze jedno pytanie czy do toggleClass można dodać styl css toggleClass('Background','#000')?

Patryk27
Moderator
  • Rejestracja:prawie 18 lat
  • Ostatnio:prawie 2 lata
  • Lokalizacja:Wrocław
  • Postów:13042
0

Nie, nie możesz wprost robić toggle dla atrybutów CSS.


Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.