JQuery brokes pseudoclass: зависание после выполнения скрипта

Question

У меня возникли небольшие проблемы с JQuery. Существует литий тег на сайте и есть этот стиль:

li { margin: 0; padding: 0; clear: both;} 
li:hover {background-color: #FFFFFF; margin: 0; padding: 0; clear: both;} 

Когда кто-то попытался щелкнуть на этом элементе это цвет становится статичным, вот код:

$('.li-element-class').css('background-color','#FFFFFF'); 

Затем на второй клик это стало так:

$('.li-element-class').css('background-color','inherit'); // also tried 'none' and 'transparent' 

Проблема заключается в том, что после этого действия, псевдо класса Ли: парить перестает работать, элемент не изменяет его цвет, когда дворняжка сор над ним ...

Google не может предложить какое-либо решение, поэтому я надеюсь, что StackOverflow знает :)

Вот HTML код:

<li id="categoryButton22"><span class="menuico"></span><div style="width:70%;display:inline-block;"><a class="showMenuCover" category="22" parentcategory="1" style="color: rgb(0, 0, 0);">Садовая столовая мебель</a></div><div id="subCategoryGlyph22" style="display:none; padding-right:3px; float:right;"><span class="glyphicon glyphicon-menu-right"></span></div></li> 

И весь код JQuery:

$(document).ready(function(){ 

    /* 
     Ця змінна потрібна для перевірки, щоб гарно перевідкривати панель, 
     коли користувач переходить на ыншу категорыю при выдкритій панелі. 
    */ 
    var previousCategoryClicked = ''; 
    var previousGlyphArrow = ''; 
    var previousCategoryButton = ''; 

    /* 
     Функція, яка керує панелькою меню та контентом в ній 
    */ 
    $('.showMenuCover').click(function(){ 

     // Виносимо дані з атрибутів тегу в окремі змінні, так простіше в подальшому 
     var parentCategory = $(this).attr('parentCategory'); 
     var parentCategoryButton = '.parentCat'+parentCategory; 
     var CategoryID = $(this).attr('category'); 
     var glyphArrow = '#subCategoryGlyph'+CategoryID; 
     var categoryButton = '#categoryButton'+CategoryID; 

     // Обчислення висоти елемента li для виставлення адекватних відступів гліфові 
     var buttonHeight = $(categoryButton).height(); 
     if(buttonHeight > 10) { 
      var marginGlyph = buttonHeight/2 - 7; 
     } 
     else { 
      var marginGlyph = buttonHeight/2 - 2; 
     } 

     /* 
      Далі перевіряємо чи відкрита панель з меню. 
      Якщо відкрита, то просто ховаємо її, якщо закрита то відкриваємо її і втягуємо контент через AJAX. 
      Перед цим виконуємо додаткову перевірку за допомогою змінної previousCategoryClicked. 
      За допомогою неї перевіряємо чи є панель відкрита, якщо користувач клікнув на іншу категорію. 
     */ 
     if(previousCategoryClicked != CategoryID && $('.menu-cover').css('display') == 'block') { 

      $('.menu-cover').fadeOut('fast'); 
      $(previousGlyphArrow).fadeOut('fast'); 
      $(previousCategoryButton).css('background-color', 'inherit'); 

      $('.menu-cover').fadeIn('fast'); 
      $(glyphArrow).fadeIn('fast'); 
      $(glyphArrow).css('margin-top', marginGlyph); 
      $(categoryButton).css('background-color', 'white'); 
     } 
     else { 
      if ($('.menu-cover').css('display') == 'none') { 
       $('.menu-cover').fadeIn(); 
       $(glyphArrow).fadeIn(); 
       $(glyphArrow).css('margin-top', marginGlyph); 
       $(categoryButton).css('background-color', 'white'); 
      } 
      else { 
       $('.menu-cover').fadeOut(); 
       $(glyphArrow).fadeOut(); 
       $(categoryButton).css('background-color', 'inherit'); 
      } 
     } 

     previousCategoryClicked = CategoryID; 
     previousGlyphArrow = glyphArrow; 
     previousCategoryButton = categoryButton; 

    }); 
}); 

Answer 1

Использование метода jQuery's .css() должно быть последним средством для выполнения чего-либо. Вместо этого вы должны изменить способ элемент выглядит по классам:

$(document).ready(function() { 
 
    $('li').on('click', function() { 
 
    if ($(this).hasClass('white-background')) { 
 
     $(this).removeClass('white-background'); 
 
    } else { 
 
     $(this).addClass('white-background'); 
 
    } 
 
    }); 
 
});

body { 
 
    background-color:#ccc; 
 
} 
 

 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    clear: both; 
 
} 
 

 
li:hover { 
 
    background-color: #FFFFFF; 
 
    margin: 0; 
 
    padding: 0; 
 
    clear: both; 
 
} 
 

 
.white-background { 
 
    background-color: #FFFFFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<ul> 
 
    <li class="li-element-class"> 
 
    1 
 
    </li> 
 
    <li class="li-element-class"> 
 
    2 
 
    </li> 
 
</ul> 
 
</body>