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

Question

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%');??

Answer 1

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%');
 });

 

Comments

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>

 

---

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') + '%');
  }));

 

---

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.

 

---

Super, bardzo się przyda i znowu kolejnej rzeczy się dowiedziałam :)