Drukowana wersja tematu

Napisany przez: siutek 21.03.2018, 08:13:14

Witam, mam menu w postaci jak poniżej:

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/ul.html>
  <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 1</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
  <http://december.com/html/4/element/li.html class="menu-item-has-children">
    <http://december.com/html/4/element/a.html>posiada podmenu</http://december.com/html/4/element/a.html>
    <http://december.com/html/4/element/ul.html class="sub-menu">
      <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 1</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
      <http://december.com/html/4/element/li.html class="menu-item-has-children">
        <http://december.com/html/4/element/a.html>posiada podmenu</http://december.com/html/4/element/a.html>
        <http://december.com/html/4/element/ul.html class="sub-menu">
          <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 1</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
          <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 2</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
          <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 3</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
        </http://december.com/html/4/element/ul.html>
      </http://december.com/html/4/element/li.html>
      <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 3</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
    </http://december.com/html/4/element/ul.html>
  </http://december.com/html/4/element/li.html>
  <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="">txt 3</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
  <http://december.com/html/4/element/li.html class="menu-item-has-children">
    <http://december.com/html/4/element/a.html>posiada podmenu</http://december.com/html/4/element/a.html>
    <http://december.com/html/4/element/ul.html class="sub-menu">
      <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 1</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
      <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 2</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
      <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html>txt 3</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html>
    </http://december.com/html/4/element/ul.html>
  </http://december.com/html/4/element/li.html>
</http://december.com/html/4/element/ul.html>
[HTML] pobierz, plaintext 

Kod jQuery:

[HTML] pobierz, plaintext 
var $ = jQuery;
$(function() {
  $( ".menu-item-has-children a" ).click(function() {
 
        $( ".sub-menu", this ).next().toggle(200);
 
  });    
});   
[HTML] pobierz, plaintext 

oraz kod css:

[HTML] pobierz, plaintext 
a { 
  padding:20px;
  display:block;
  background-color:silver;
  width:100px;
  cursor: pointer;
  text-align: center;
}
li {
  margin: 15px 0;
  padding: 15px;
  background-color: grey;
  display: block;
  width:140px;
}
.sub-menu {
  display: none;
}
[HTML] pobierz, plaintext 

Nie wiem jak sprawić by naciśnięcie odnośnika A, który znajduje się wewnątrz <li></li> z klasą .menu-item-has-child spowodowało pokazanie podmenu z klasą .sub-menu, które znajduje się w bezpośrednim sąsiedztwie, tak bym mógł otwierać kolejne zagnieżdzęnia.

Od razu uprzedzam dociekliwych: jestem noga z JS i jQuery :/ więc jeśli zobaczycie coś dziwnego w kodzie, to jest to wynik mojej niewiedzy.

Napisany przez: trueblue 21.03.2018, 08:23:15

Po prostu

[HTML] pobierz, plaintext 
$(this).next()
[HTML] pobierz, plaintext 

Ale dlaczego używasz <a> do otwierania podmenu? Kliknięcie dodawaj bezpośrednio na <li> i również w nim zawrzyj tekst, który obecnie jest w linku.

Napisany przez: siutek 21.03.2018, 08:43:44

nie mogę na <li> dlatego, że mam menu wielopoziomowe. i ponowne kliknięcie w element o klasie .menu-item-has-child powoduje zwinięcie tego co przed chwilą rozwinąłem. Dlatego musiałem się ograniczyć do <a> który swym zasięgiem nie obejmuje kolejnych .sub-menu. Nie wiem czy dobrze wytłumaczyłem...

Jeśli któryś element <li> na najwyższym poziomie ma klasę .menu-item-has-children, to kliknięcie w niego powoduje rozwinięcie .submenu, które znajduje się w nim. I teraz, jeśli w tym submenu kolejny element <li> ma klasę .menu-item-has-children to chciałbym móc je rozwinąć, niestety klikając w niego klikam jednocześnie w cały <li> nadrzędny z pierwszego poziomu, co skutkuje owszem rozwinięciem tego co chce, ale jednocześnie zwijam element nadrzędny...

https://codepen.io/siutek/pen/EEWLRr

Napisany przez: trueblue 21.03.2018, 09:58:10

https://jsfiddle.net/0p7wm7s2/

Napisany przez: siutek 21.03.2018, 10:33:24

@trueblue usunąłeś linka <a>posiada podmenu</a>, a ja niestety nie mogę tak zrobić, gdyż wykonuję te wszystkie operacje na menu wygenerowanym przez wordpressa, w którym A będzie zawsze (bez większej rzeźby), bez względu na to czy ma podmenu czy nie.

Napisany przez: aras785 21.03.2018, 10:38:43

https://jsfiddle.net/0p7wm7s2/7/

lub

https://jsfiddle.net/0p7wm7s2/9/

Napisany przez: siutek 21.03.2018, 11:37:45

pierwszy link! bingo!
działą elegancko

dziękuję, kłaniam się nisko