Невозможно изменить фон div, содержащий неупорядоченный список

Question

Просто хотите динамически менять фон, похоже, не в состоянии это сделать, что мне здесь не хватает? Я должен уточнить, что фон контейнера DIV Я пытаюсь изменить ...

$('#container').click(function(){ 
    $(this).toggleClass('bgchange'); 
}); 

$('#container ul li').click(function(){ 
    $(this).toggleClass('bgchange'); 
}); 

Fiddle http://jsfiddle.net/7ed7zs9w/1/

Answer 1

Идентификатор идентификатор является более специфичным, чем идентификатор класса для контейнера CSS так оно становится переопределенным. Поэтому, если вы хотите переопределить для контейнера и иметь его также изменить цвет, добавьте !important. Пример http://jsfiddle.net/e5bgsh3v/

Answer 2

JSFIDDLE DEMO ->http://jsfiddle.net/7ed7zs9w/4/

Это происходит потому, что у вас есть цвет фона, упомянутый в селекторе #container в CSS, который имеет более высокую иерархию, чем класс bgchange. Следовательно, он никогда не меняется.

Внести следующие изменения:

HTML

<div id="container" class="redbg"> //add class redbg here 

CSS

#container{ 
    height: 150px; //remove background-color here 
    overflow-y: scroll; 
} 
.bgchange{ 
    background-color: blue; 
} 
.redbg{ 
    background-color: red; 
} 

JQuery

$('#container').click(function(){ 
    $(this).toggleClass('redbg bgchange'); // toggle between 2 classes instead of 1 
}); 

$('#container ul li').click(function(e){ 
    e.stopPropagation(); // add this here 
    $(this).toggleClass('bgchange'); 
});