jQuery toggleClass的if else语句无法工作

Question

我无法在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
                $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"
                });
            }
        });
    });

我无法让这个工作起来。

我需要使用on.('click')方法吗？

有什么想法吗？

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

- Ho Thanh Cyberdelia Nhan

---

看起来 CSS specificity 中，ul.dijete 比 .vidimte 更具体，因此添加类不起作用。一个解决方案是同时切换两个 -> ..toggleClass('vidimte dijete')。 - adeneo

你为什么要使用toggleClass()而不是removeClass()，考虑到你在if语句中检查了类是否已经存在？此外，你的if语句删除了类，但是else语句没有将其添加回来。 - nnnnnn

Answer 1

我明白了！感谢分享想法！

这个解决方案对我有效：

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"
                });
            }
        }
    });
   });

- Ho Thanh Cyberdelia Nhan

Answer 2

.toggleClass()函数用于添加或删除类，你在else表达式中没有添加或删除类; 在else中添加$j(this).children(".dijete").toggleClass('vidimte') 但我认为你的目标是点击链接后显示/隐藏子链接并更改背景。那么代码如下： $j(this).children('ul').toggleClass('dijete vidimte')

- Sedny LL