[英]Change elements/classes in/with jquery
I'm new in jQuery and used it right now for a navigation, that slides in and out in mobile or small views. 我是jQuery的新手,现在将其用于导航,可在移动视图或小视图中滑动。 That works fine and correct, but I'm using a plus-icon to open a submenu, that changes into a minus-icon, when the submenu is opened.
可以正常工作,但是我使用加号图标来打开子菜单,当打开子菜单时,该菜单会变为减号图标。
But it doesn't change back into the plus-icon, when the submenu is closed. 但是,子菜单关闭时,它不会变回加号图标。
The code is the following: 代码如下:
$(document).ready(function() {
$('<span class="menu-expander"><span class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
$('#menu-toggle').click(function() {
$(this).next('#navigation-main').slideToggle();
});
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
});
});
I think the "interesting" part might be the second function, the first is still for a hamburger-icon, that opens the navigation, that works (okay, it doesn't show a sliding animation, what the second one do... no idea, why it don't works...). 我认为“有趣的”部分可能是第二个功能,第一个仍然是用于汉堡图标的,它可以打开导航,并且可以正常工作(好吧,它不显示滑动动画,第二个功能是...不知道,为什么它不起作用...)。
So the second part is for the plus. 所以第二部分是加号。 When I click on the plus, the submenu slides in and the plus changes to the minus, but when I click back to the the minus it doesn't change back to the plus.
当我单击加号时,子菜单会滑入,并且加号更改为减号,但是当我单击返回到减号时,它不会更改为加号。
Has somebody any idea why it doesn't work or can explain me, how I can do it work? 有谁知道为什么它不起作用或不能解释我,我该如何使其起作用?
Regards, Markus 问候,马库斯
The problem is that your selector is trying to find a span
with both plusicon
and vertical
classes but after the first call to this: 问题是您的选择器试图在同时
plusicon
和vertical
类的同时找到一个span
,但是在第一次调用它之后:
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
wich removes said classes, it is not able to find your target span
. 将其删除,将无法找到目标
span
。
To work around this you could assign an id ( iconId
on the next example) or another class to your icon so it can be allways found 要解决此问题,您可以为您的图标分配一个id(在下一个示例中为
iconId
)或另一个类,以便始终可以找到它
$('<span class="menu-expander"><span id="iconId" class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
...
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('#iconId').toggleClass('plusicon vertical');
});
Do this : 做这个 :
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
var $icon = $(this).children('#ID OF ELEMENT'); // Would be easier to add an ID to your element whcih you want to alter - limits the error possibilties :)
if($icon.hasClass("CLASS YOU WANT TO GET RID OF"){
$icon.removeClass("CLASS YOU WANT TO GET RID OF");
$icon.addClass("THE CLASS YOU NEED");
else{
$icon.addClass("THE CLASS YOU WANT TO ADD");
}
});
I am at work now so pardon any typing errors. 我现在在工作,所以请避免输入错误。 You basically need to check whether the class that changes the icon to a MINUS symbol is still active - if so you change it back.
基本上,您需要检查将图标更改为MINUS符号的类是否仍处于活动状态-如果是,则将其重新更改。
I hope it will help. 希望对您有所帮助。
Points: 要点:
$(document).ready(function() { $('<span class="menu-expander"><span class="plusicon horizontal">horizontal</span><span class="plusicon vertical show">vertical</span></span>').insertAfter('.level_2'); $('#menu-toggle').click(function() { $('#navigation-main').slideToggle(); }); $('.menu-expander').click(function() { $(this).prev('.level_2').slideToggle(); $(this).find('.plusicon').toggleClass('show'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> .plusicon {display:none} .show {display:block!important} </style> <ul> <li id="menu-toggle" class="level_2">Toggle</li> </ul> <ul id="navigation-main"> <li>test</li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.