dodanie i usunięcie dodanej klasy Opcje

[1992bartekk]

Witam mam problem nad którym męczę się już zdecydowanie za długo być może ze zmęczenia. Mianowicie po kliknięciu w <li> rozsuwa się menu i dodana klasa "foo" do <li>. Moje pytanie brzmi jak zrobić by po ponownym kliknięciu w ten sam li klasa została usunięta.? Kod

[HTML] pobierz, plaintext 
  <script>
$(".show_menu ul > .menu-item-type-custom").click(function() {
    $(this).find('.sub-menu').toggle("slow")
}); 
 
$('#menu-item-310').click(function() {    
$('#menu-item-310').addClass('foo');
});
</script>
[HTML] pobierz, plaintext 

[nospor]

Poprostu sprawdz czy klasa istnieje i jak to ja usun a jak nie to ja dodaj

[trueblue]

http://api.jquery.com/toggleclass/
Albo: https://api.jquery.com/hasclass/ (z addClass i removeClass).

[1992bartekk]

mam natomiast jeszcze jedno pytanie jak połączyć to by działało to z funkcją click, gdy klikam w konkretny element menu gdyż kod ten wykonywany jest niezależnie od tego gdzie kliknę. Poniżej aktualny kod:

[HTML] pobierz, plaintext 
$(".show_menu ul > .menu-item-type-custom").click(function() {
    $(this).find('.sub-menu').toggle("slow")
 
if ($("#menu-item-310").hasClass("foo")) {
  $("#menu-item-310").removeClass("foo");
}	
else {
$('#menu-item-310').addClass('foo');	
}
 
}); 
[HTML] pobierz, plaintext 

[trueblue]

No, ale połączyłeś. Co jest więc nie tak?

Ten post edytował trueblue 2.11.2016, 19:46:03

[1992bartekk]

to że jest to jeden z paneli <li> w menu stąd też funcja ta wykonywana jest za kazdy razem gdy klikam w dany odnośnik w menu. Ten kod chyba będzie już temu bliższy o co mi chodzi...

[HTML] pobierz, plaintext 
$(".show_menu ul > .menu-item-type-custom").click(function() {
    $(this).find('.sub-menu').toggle("slow")}); 
 
 
jQuery('#menu-item-310').click(function(){
  $(this).data('clicked', true);
});
 
 
if(jQuery('#menu-item-310').data('clicked')) {
if ($("#menu-item-310").hasClass("foo")) {
  $("#menu-item-310").removeClass("foo");
}	
else {
$('#menu-item-310').addClass('foo');	
}
}
[HTML] pobierz, plaintext 

ale niestety nie działa tak jak powinien

Ten post edytował 1992bartekk 2.11.2016, 19:53:49

[trueblue]

Tylko dla wybranego <li> ma być wykonany ten kod, czy dla dowolnego, ale pierwszego, który zostanie kliknięty?

[1992bartekk]

takich <li> w menu mam kilka menu-item-310, menu-item-311, menu-item-312, menu-item-313, menu-item-314

górna funkcja jest wykonywana dla każdego:

[HTML] pobierz, plaintext 
$(".show_menu ul > .menu-item-type-custom").click(function() {
    $(this).find('.sub-menu').toggle("slow")}); 
[HTML] pobierz, plaintext 

natomiast ta reszta ma być wykonywana dla każdego z osobna

[HTML] pobierz, plaintext 
jQuery('#menu-item-310').click(function(){
  $(this).data('clicked', true);
});
 
 
if(jQuery('#menu-item-310').data('clicked')) {
if ($("#menu-item-310").hasClass("foo")) {
  $("#menu-item-310").removeClass("foo");
}	
else {
$('#menu-item-310').addClass('foo');	
}
}
[HTML] pobierz, plaintext 

dużo tych odnośników nie ma stąd też bez problemu mogę to zrobić w ten sposób jednak coś nie do końca działa... :/

[trueblue]

W każdym .menu-item-type-custom w atrybucie np. data-connected przechowuj id (lub klasę) elementu powiązanego.
Wtedy w funkcji klik pobierz wartość tego atrybutu i na jego podstawie sprawdź czy odpowiadający mu element ma klasę czy nie.

[1992bartekk]

szczerze brzmi to dobrze... problem w tym ze nie za bardzo wiem jak to połączyć :/

[trueblue]

[HTML] pobierz, plaintext 
$(".show_menu ul > .menu-item-type-custom").click(function() {
 $(this).find('.sub-menu').toggle("slow");
 $('#'+$(this).data('connected')).toggleClass("foo");
}); 
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<ul>
<li data-connected="menu-item-310">abc</li>
<li data-connected="menu-item-311">def</li>
</ul>
[HTML] pobierz, plaintext 

[1992bartekk]

szczerze to nie wiem czemu to nie działa tutaj podaję jeszcze dokładny kod menu

[HTML] pobierz, plaintext 
<div id="navwrap" class="menu-mobile-container"><ul id="menu-mobile" class="menu_mobile"><li id="menu-item-310" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-310"><a href="#show1">Menu1</a>
<ul class="sub-menu" style="display: block;">
	<li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300"><a href="http://localhost/sklep/cart/">Cart</a></li>
	<li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-301"><a href="http://localhost/sklep/shop/">Sklep</a>
	<ul class="sub-menu" style="display: block;">
		<li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="http://localhost/sklep/firma/">Firma</a></li>
		<li id="menu-item-309" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-309"><a href="http://localhost/sklep/oferta/">Oferta</a></li>
	</ul>
</li>
</ul>
</li>
<li id="menu-item-311" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-311"><a href="#show2">menu 2</a>
<ul class="sub-menu" style="display: block;">
	<li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="http://localhost/sklep/aktualnosci/">Aktualności</a></li>
	<li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-299"><a href="http://localhost/sklep/checkout/">Checkout</a></li>
	<li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-303"><a href="http://localhost/sklep/sklepy/">Sklepy</a>
	<ul class="sub-menu" style="display: block;">
		<li id="menu-item-305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-305"><a href="http://localhost/sklep/kolekcja-2/">Kolekcja</a></li>
		<li id="menu-item-306" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-306"><a href="http://localhost/sklep/patronat/">Patronat</a></li>
	</ul>
</li>
</ul>
</li>
 
</ul></div>
[HTML] pobierz, plaintext 

[trueblue]

Na tym kodzie na pewno nie zadziała, bo nie dodałeś atrybutów data-connected.
Ale może napisz jaki efekt chcesz osiągnąć.

[1992bartekk]

ogólnie górny kod pozwala na rozwijanie i pokazywanie podmenu po kliknięciu. Ponowne kliknięcie to zwinięcie pokazanego menu. o


Ogólnie przy menu które można rozwinąć mam plus jednak tak jak zamierzałem dodanie klasy miało sprawić że zamiast plusa pojawia się minus po kliknięciu... ponowne kliknięcie i zwiniecie menu pojawia się plus itd...

[trueblue]

Czyli kiedy klikam #menu-item-301, to rozwija się .sub-menu z pozycjami 302 i 309.
A gdzie się pokazuje +/-?

[1992bartekk]

no tam jest menu 3 poziomowe raczej #menu-item-310 i pokazuje wszystko co jest w jego .sub-menu... a plus jest w.... #menu-item-310 <a href="#show1">Menu1</a>

Ten post edytował 1992bartekk 2.11.2016, 20:37:34

[trueblue]

To w takim razie po co te kombinacje.
Klikasz #menu-item-310 pokazujesz .sub-menu, a klasę ustawiasz dla elementu <a> (w tym <li>).

[1992bartekk]

no tak ale to ta sama zasada musi class zostać dodany do aktualnie aktywnego menu i class musi zostać usunięty po ponownym kliknięciu czy źle myśle ?

odp. dla potomnych!!! temat do zamknięcia!!! (IMG:style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
$(".show_menu ul > .menu-item-type-custom").click(function() {
 $(this).find('.sub-menu').toggle("slow");
 $( this ).toggleClass( "foo" );
}); 
[HTML] pobierz, plaintext