Jquery изменения CSS вложенной DIV

Question

Я имею место заморачиваться с JQuery и будучи немного новичка с ним вот моя проблема:

Я делаю меню панели падение вниз, Ive получил падение вниз ок но нужно повлиять на фоновое изображение div, которое вложено внутри div, нажимаемого для запуска действия. т.е. «.side_bar_top_text» - это фон, который нужно изменить.

JQuery:

<script type="text/javascript"> 
$(document).ready(function() { 
$('.side_bar_top').click(function(){ 
    if ($(this).attr('class') != 'active'){ 
     $('.side_bar .side_bar_panel', this).slideUp(); 
     $(this).next().slideToggle(); 
     $(this).removeClass('active'); 
     $(this).addClass('active'); 

    } 
    }); 
}); 
</script> 

HTML:

<div class="side_bar_top"><div class="side_bar_top_text">COMMERCIAL CONSTRUCTION</div></div> 
<div class="side_bar"> 
    <div class="side_bar_panel"> 
    /*the list of elements*/ 
    </div> 
</div> 

Все, что мне нужно сделать, это изменить фоновое изображение side_bar_top_text с помощью CSS, когда панель вверх и наоборот. Я пробовал различные методы без везения. Может ли кто-нибудь помочь?

Answer 1

Вам поможет? http://jsfiddle.net/jgQx3/2/

CSS:

.side_bar_top { 
    background: url(path/file1.jpg); 
} 

.side_bar_top.active { 
    background: url(path/file2.jpg); 
} 

SCRIPT:

$(document).ready(function() { 
    $('.side_bar_top').on('click', function(){ 
    var $this = $(this); 

    $this.toggleClass('active'); 
    $this.next('.side_bar').slideToggle(); 
    }); 
}); 

HTML:

<div class="side_bar_top active"> 
    <div class="side_bar_top_text">COMMERCIAL CONSTRUCTION</div> 
</div> 
<div class="side_bar"> 
    <div class="side_bar_panel"> 
    /*the list of elements*/ 
    </div> 
</div> 

Эта функция не разрушаться уже открытые варианты, хотя.

Answer 2

Чтобы получить элемент side_bar_top_text, который является дочерним щелкнутым элементом, сделайте следующее:

$(this).find('side_bar_top_text'); 

Чтобы изменить цвет фона:

$(this).find('side_bar_top_text').css('background-image', '<your_image>'); 

Answer 3

В CSS:

.side_bar_top .side_bar_top_text{ 
    background:url(path-to-original-image.jpg); //whatever you want 
} 

.side_bar_top.active .side_bar_top_text{ 
    background:url(path-to-image.jpg); //whatever you want 
} 

Но если у вас есть определенное изображение для каждой или какой-либо другой причины, чтобы сделать это в jquery:

$(document).ready(function() { 
$('.side_bar_top').click(function(){ 
    $(this).siblings().removeClass('active'); 

    if ($(this).attr('class') != 'active'){ 
     $('.side_bar .side_bar_panel', this).slideUp(); 
     $(this).next().slideToggle(); 
     $('.side_bar .side_bar_panel', this).removeClass('active'); 
     $(this).addClass('active'); 

     $(this).find('.side_bar_top_text').css('background', 'url(path-to-image.jpg)'); 

    } 
    }); 
}); 

Edit:

В CSS вы можете увидеть, что мы переопределить фон для активного класса. Исходное изображение определено выше. Этот метод требует, чтобы jquery добавлял и удалял активный класс при щелчке.

Я добавил эту линию к своему слушателю:

$(this).siblings().removeClass('active'); 

, который должен удалить активный для каждого собрата из щелкнутого элемента. Это должно восстановить исходное изображение.