• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

toggle w js dla pseudo elementu - style.setProperty??

Object Storage Arubacloud
0 głosów
84 wizyt
pytanie zadane 28 sierpnia 2022 w JavaScript przez gatka84 Bywalec (2,150 p.)

Witajcie próbuje wykombinować jak dodać toggle do style.setProperty obecnie udało mi się tylko w jedną stronę ale nie potrafię żeby po kolejnym kliknięciu zmieniło z 100% na 0 w navopen.style.setProperty('--width','100%');

const toggle =document.getElementById('togglebtn');

 toggle.addEventListener('click', function onClick(event) {
  let navopen = document.getElementById("primary-navigation");
  var togglebtn = document.getElementById('hamburger-9');
  let box_after = window.getComputedStyle(navopen,'::after');
  navopen.classList.toggle('is-active');
  togglebtn.classList.toggle('is-active');
  navopen.style.setProperty('--width','100%');
 });

na podstawie tego co znalazłam na necie chciałam żeby

navopen.style.setProperty('--width','100%');

się zmieniało na ('--width','0');

będę wdzięczna za podpowiedzi jak to zrobić i chciałam to zrobić w czystym js bez jqery

czy da się owinąć toggle w navopen.style.setProperty('--width','100%');??

1 odpowiedź

+1 głos
odpowiedź 29 sierpnia 2022 przez VBService Ekspert (254,490 p.)
wybrane 29 sierpnia 2022 przez gatka84
 
Najlepsza

Możesz "sczytać" wartość przy każdym kliknięciu za pomocą

window.getComputedStyle(navopen).getPropertyValue('--width');

dla łatwiejszego użycia usunąć %


parseInt(window.getComputedStyle(navopen).getPropertyValue('--width'));

lub

window.getComputedStyle(navopen).getPropertyValue('--width').replace('%', '');

i za pomocą np. conditional (ternary) operator  - zmieniać wartość (przy każdym kliknięciu)

 

całość

:root {
  --width: 100%; /* początkowa wartość */
}

/* reszta kod css */
const toggle = document.getElementById('togglebtn');
 
toggle.addEventListener('click', function onClick(event) {
  const navopen = document.getElementById("primary-navigation");
  const togglebtn = document.getElementById('hamburger-9');
  const box_after = window.getComputedStyle(navopen,'::after');
  navopen.classList.toggle('is-active');
  togglebtn.classList.toggle('is-active');
  const navopen__width = parseInt(window.getComputedStyle(navopen).getPropertyValue('--width')); //.replace('%', '');
  navopen.style.setProperty('--width', (navopen__width == 0 ? '100':'0') + '%');
});

 

 

P.S. z kontekstu kodu jaki przedstawiłaś nie używasz zapisu z linii 6

const toggle =document.getElementById('togglebtn');
 
 toggle.addEventListener('click', function onClick(event) {
  let navopen = document.getElementById("primary-navigation");
  var togglebtn = document.getElementById('hamburger-9');
  let box_after = window.getComputedStyle(navopen,'::after');
  navopen.classList.toggle('is-active');
  togglebtn.classList.toggle('is-active');
  navopen.style.setProperty('--width','100%');
 });

 

komentarz 29 sierpnia 2022 przez gatka84 Bywalec (2,150 p.)
edycja 29 sierpnia 2022 przez gatka84

Dzięki wielkie dokładnie tego szukałam i testowałam wszystko co znalazłam na sieci stąd ta linijka w 6 wierszu. Mam jeszcze pytanko odnośnie tego projektu mianowicie próbuje podpiąć

toggle.addEventListener('click', function onClick(event)

żeby zamykało się po kliknięciu w link tak jak w button i przedtem miałam zastosowane

onclick="openNav()" i onclick="closeNav()"

ale nie za bardzo podobało mi się to rozwiązanie

przy obecnym rozwiązaniu mogę podpiąć pseudo elementy do animacji tak jak chciałam jednak dodanie 'id' do elementu 'ul' nie sprawia, że toggle.addEventListener nasłuchuje i reaguje na click na inny id=" togglebtn ".

mam tak

<header class="primary-header">
    <div class="container">
      <div class="nav-wrapper">
        <a href="#"><img src="img/logo.png" alt="logo"></a>
        <button class="mobile-nav-toggle" id="togglebtn" aria-controls="primary-navigation" aria-expanded="false" >
          <div class="hamburger" id="hamburger-9" >
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
          <span class="visually-hidden">Menu</span></button>
        <nav class="primary-navigation" id="primary-navigation">
          <ul aria-label="Primary" role="list" class="nav-list" >
            <li><a href="#">Start</a></li>
            <li><a href="#">Projekty</a></li>
            <li><a href="#">O Mnie</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </nav>
        <button class="button | display-sm-none dispaly-md-inline-flex">Login</button>
      </div>
    </div>
  </header>

 

1
komentarz 29 sierpnia 2022 przez gatka84 Bywalec (2,150 p.)

Kombinowałam i udało mi się coś takiego i przy okazji dowiedziałam się że nie może być takich samych id na stronie (choć w WordPressie jest duplikowane id o tej samej nazwie) działa :)

const element1 = document.querySelector("#togglebtn");
const element2 = document.querySelector("#togglebtn1");

[element1, element2].map(element => element.addEventListener("click", function() {
    const navopen = document.getElementById("primary-navigation");
    const togglebtn = document.getElementById('hamburger-9');
    const box_after = window.getComputedStyle(navopen,'::after');
    navopen.classList.toggle('is-active');
    togglebtn.classList.toggle('is-active');
    const navopen__width = parseInt(window.getComputedStyle(navopen).getPropertyValue('--width')); //.replace('%', '');
    navopen.style.setProperty('--width', (navopen__width == 0 ? '100':'0') + '%');
  }));

 

komentarz 29 sierpnia 2022 przez VBService Ekspert (254,490 p.)
edycja 29 sierpnia 2022 przez VBService

Możesz też tak zapisać

const elements = document.querySelectorAll('[id^="togglebtn"]');

elements.forEach((element) => { element.addEventListener("click", () => {
  const navopen = document.getElementById("primary-navigation");
  const togglebtn = document.getElementById('hamburger-9');
  navopen.classList.toggle('is-active');
  togglebtn.classList.toggle('is-active');
  const navopen__width = parseInt(window.getComputedStyle(navopen).getPropertyValue('--width'));
  navopen.style.setProperty('--width', (navopen__width == 0 ? '100':'0') + '%');
})});

lub

const elements = document.querySelectorAll('[id^="togglebtn"]');

[...elements].map((element) => element.addEventListener("click", () => {
  const navopen = document.getElementById("primary-navigation");
  const togglebtn = document.getElementById('hamburger-9');
  navopen.classList.toggle('is-active');
  togglebtn.classList.toggle('is-active');
  const navopen__width = parseInt(window.getComputedStyle(navopen).getPropertyValue('--width'));
  navopen.style.setProperty('--width', (navopen__width == 0 ? '100':'0') + '%');
}));

 

ten zapis [id^="togglebtn"] powoduje, że wszystkie id zaczynające się od "togglebtn" będą brane pod uwagę np.

   <div id="togglebtn"></div>
   <div id="togglebtn1"></div>
   <div id="togglebtn2"></div>
   <div id="togglebtn-1"></div>
     <p id="togglebtn_a"></p>
<button id="togglebtn_toggle2"></button>  itd.

 

1
komentarz 30 sierpnia 2022 przez gatka84 Bywalec (2,150 p.)
Super, bardzo się przyda i znowu kolejnej rzeczy się dowiedziałam :)

Podobne pytania

0 głosów
1 odpowiedź 886 wizyt
pytanie zadane 31 października 2017 w JavaScript przez cyberDEV Użytkownik (780 p.)
0 głosów
0 odpowiedzi 377 wizyt
pytanie zadane 12 stycznia 2019 w JavaScript przez kacperl95 Obywatel (1,980 p.)
0 głosów
1 odpowiedź 177 wizyt
pytanie zadane 11 listopada 2019 w JavaScript przez BlvckFox Gaduła (4,240 p.)

92,666 zapytań

141,564 odpowiedzi

320,019 komentarzy

62,031 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...