jQuery toggleClass if else not working

我無法在if-else條件中使用jQuery toggleClass（）。jQuery toggleClass if else not working

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

我不能得到這個工作。

我必須使用。（'click）方法嗎？

任何想法？

感謝您的幫助或任何信息！

來源

2016-03-09 Fritex

看起來像[CSS特異性]（https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity），'ul.dijete'比' .vidimte'，所以添加類什麼也不做。一種解決方案是切換兩個 - >'..toggleClass（'vidimte dijete'）' – adeneo

爲什麼你使用toggleClass（）而不是removeClass（），因爲你在一個if中調用它來檢查類是否已經存在？另外，你的if刪除了這個類，但是你的其他東西不會添加它。 – nnnnnn

Got it！感謝分享想法！

解決方案爲我工作：

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

來源

2016-03-09 01:31:48 Fritex

的.toggleClass()函數用來刪除或添加班組長，也就是在你else表達你沒有刪除或添加的類別回你的問題說。加$j(this).children(".dijete").toggleClass('vidimte')到else 但我認爲你的目標是點擊鏈接，然後顯示/隱藏子鏈接也改變背景。然後代碼鏈接這些： $j(this).children('ul').toggleClass('dijete vidimte')

來源

2016-03-09 02:19:49

jQuery toggleClass if else not working

回答

相關問題