0

私はjqueryに悩まされており、少し初心者なので、ここに私の問題があります:

ドロップ ダウン パネル メニューを作成しています。ドロップ ダウンは問題ありませんが、クリックしてアクションをトリガーする 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

このようなものはあなたを助けますか？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 に答える
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 に答える