div嵌套

Question

我有jQuery的一點小毛病而被jQuery的變化CSS有點與它新手這裏是我的問題：

我想提出一個下拉麪板菜單，我已經得到了下拉OK但需要影響div內嵌入div的背景圖像，div被點擊觸發動作。即「.side_bar_top_text」是需要改變背景的div。

的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> 

所有我需要做的是通過CSS改變side_bar_top_text的背景圖像時，面板向上，反之亦然。 我試過各種方法，沒有運氣。 任何人都可以幫忙嗎？

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)'); 

    } 
    }); 
}); 

編輯：

在CSS中，你可以看到，我們覆蓋的活動類的背景。原始圖像在上面定義。 該方法需要jquery添加和刪除點擊活動類。

我加入這行到你的聽衆：

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

應主動刪除了點擊的元素的每一個兄弟。這應該會恢復您的原始圖像。