0

我对 jquery 有一点困扰，并且对它有点新手，这是我的问题：

我正在制作一个下拉面板菜单，我已经得到了下拉菜单，但需要影响嵌套在 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 的背景图像，反之亦然。我尝试了各种方法都没有运气。任何人都可以帮忙吗？

4

3 回答 3

0

要获取作为side_bar_top_text单击元素的子元素的元素，请执行以下操作：

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

要更改背景：

$(this).find('side_bar_top_text').css('background-image', '<your_image>');
于 2013-05-01T16:21:14.243 回答
0

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

这应该为单击元素的每个同级删除活动。那应该恢复您的原始图像。

于 2013-05-01T16:21:27.810 回答
0

这样的事情对你有帮助吗？http://jsfiddle.net/jgQx3/2/

CSS：

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

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

脚本：

$(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>

但是，此功能不会折叠已经打开的选项。

于 2013-05-01T16:54:09.060 回答