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

应主动删除了点击的元素的每一个兄弟。这应该会恢复您的原始图像。