jQuery toggleClass如果否则不工作 [英] jQuery toggleClass if else not working

问题描述

我无法在if-else条件中使用jQuery toggleClass（）。

我的HTML代码是：

 < ul> 
< li class =firstLevel> 
< a href =＃main_cat_01> MAIN CATEGORY＃1< / a> 
< ul class =dijete> 
< li> 
< a href =＃subt_cat_01> SUB CATEGORY＃1< / a> 
< / li> 
< / ul> 
< / li> 
< li class =firstLevel> 
< a href =＃main_cat_02> MAIN CATEGORY＃2< / a> 
< ul class =dijete> 
< li> 
< a href =＃subt_cat_02_01> SUB CATEGORY＃1< / a> 
< / li> 
< / ul> 
< / li> 
< / ul> 
  

我的CSS代码是：

  ul.dijete {
 display：none; 
} 
 
 .vidimte {
 display：block; 
} 
  

我的JavaScript代码是：

  var $ j = jQuery.noConflict（）; 
 $ j（function（）{
 $ j（'li.firstLevel'）click（function（）{
 if（$ j（this）.children（ul.dijete ）.hasClass（vidimte））{
 $ j（this）.children（ul.dijete）。toggleClass（'vidimte'）; // visible 
（this）.find （ul.dijete）。prev（li.firstLevel a）。css（{
background-image：'url（URL_TO_THE_IMAGE_OPEN）'，
background-position：right center，
display：block，
background-repeat：no-repeat
}）; 
} else {// else add image close并显示无
 $ j（this）.find（'ul.vidimte'）。prev（li.firstLevel a）。css（{
background-image：'url（URL_TO_THE_IMAGE_CLOSE） '，
background-position：right center，
display：block，
background-repeat：no-repeat
} ; 
} 
}）; 
}）; 
  

我无法工作。

我必须使用on。（'click）方法吗？

p>

感谢您的帮助或任何信息！

解决方案

感谢您分享想法！

解决方案适用于我：

  var $ j = jQuery.noConflict（）; 
 
 $ j（function（）{
 $ j（'li.firstLevel'）。on（'click' .closest（li）。children（ul.dijete）。length）{
 $ j（this）.children（ul.dijete）。toggleClass（'vidimte'）; 
 
 
 if（$ j（this）.children（ul.dijete）。hasClass（vidimte））{
 $ j（this）.find（ul.dijete ）.prev（li.firstLevel a）。css（{
background-image：'url（http://www.v-tac.hr/wp-content/themes/vtac/images/ story-customfilters / open.png）'，
background-position：right center，
display：block，
background-repeat重复
}）; 
} else {
 $ j（this）.find（'ul.dijete'）。prev（li.firstLevel a）。css $ bbackground-image：'url（http://www.v-tac.hr/wp-content/themes/vtac/images/stories/customfilters/closed.png）'，
background-位置：右中心，
显示：块，
背景重复：无重复
} 
} 
} 
}）; 
}）; 
  

I cannot get working jQuery toggleClass() within if-else condition.

My HTML code is:

<ul>
  <li class="firstLevel">
   <a href="#main_cat_01">MAIN CATEGORY #1</a>
     <ul class="dijete">
       <li>
          <a href="#subt_cat_01">SUB CATEGORY #1</a>
        </li>
     </ul>
   </li>
   <li class="firstLevel">
   <a href="#main_cat_02">MAIN CATEGORY #2</a>
     <ul class="dijete">
       <li>
          <a href="#subt_cat_02_01">SUB CATEGORY #1</a>
        </li>
     </ul>
   </li>
</ul>

My CSS code is:

ul.dijete {
    display: none;
}

.vidimte{
    display: block;
}

My JavaScript code is:

    var $j = jQuery.noConflict();
    $j(function() {
        $j('li.firstLevel').click(function(){
            if($j(this).children("ul.dijete").hasClass("vidimte")){
                $j(this).children("ul.dijete").toggleClass('vidimte'); //visible
                $j(this).find("ul.dijete").prev("li.firstLevel a").css({
                    "background-image":'url(URL_TO_THE_IMAGE_OPEN)',
                    "background-position":"right center",
                    "display":"block",
                    "background-repeat":"no-repeat"
                });
            }else{ // else add image close and display none
                $j(this).find('ul.vidimte').prev("li.firstLevel a").css({
                    "background-image":'url(URL_TO_THE_IMAGE_CLOSE)',
                    "background-position":"right center",
                    "display":"block",
                    "background-repeat":"no-repeat"
                });
            }
        });
    });

I cannot get this working.

Do I have to use on.('click) method for that?

Any ideas?

Thanks for help or any information!

解决方案

Got it! Thanks for sharing ideas!

Solution worked for me:

var $j = jQuery.noConflict();

$j(function() {
    $j('li.firstLevel').on('click', function() {
        if($j(this).closest("li").children("ul.dijete").length){
            $j(this).children("ul.dijete").toggleClass('vidimte');


            if($j(this).children("ul.dijete").hasClass("vidimte")){
                $j(this).find("ul.dijete").prev("li.firstLevel a").css({
                    "background-image":'url(http://www.v-tac.hr/wp-content/themes/vtac/images/stories/customfilters/open.png)',
                    "background-position":"right center",
                    "display":"block",
                    "background-repeat":"no-repeat"
                });
            }else{
                $j(this).find('ul.dijete').prev("li.firstLevel a").css({
                    "background-image":'url(http://www.v-tac.hr/wp-content/themes/vtac/images/stories/customfilters/closed.png)',
                    "background-position":"right center",
                    "display":"block",
                    "background-repeat":"no-repeat"
                });
            }
        }
    });
   });

这篇关于jQuery toggleClass如果否则不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！