JQuery가 의사 복제를 중단했습니다. 스크립트를 실행 한 후 마우스를 놓습니다.

Question

JQuery에 문제가 거의 없습니다. 이 사이트에 리 태그이며,이 스타일이 : 두 번째 클릭에 그런

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

: 누군가가이 색이 고정되고있다이 요소를 클릭 노력

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

는, 여기에 코드를 이 같은이 될 것 :

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

문제는 그 행동, 의사 클래스 리 후 것입니다 : 가져가 작동을 멈 춥니 요소가 변경되지 않는 색상 때 CUR입니다 위에 SOR ...

구글이 모든 솔루션을 제안 할 수

, 그래서 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의 .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>