0

我对 Jquery 很陌生，所以对此提供任何帮助将不胜感激。

希望这是有道理的：

我建立了一个基于 Twitter Bootstrap 的网站，它有多个折叠 div，每个都由自己的按钮触发。这些按钮都共享同一个类。

我正在使用“显示”和“隐藏”事件来更改背景图像 css 属性（从“+”表示展开到“-”表示折叠）。

我仍然不确定如何使用“this”来定位当前元素，所以我只能更改按钮显示/隐藏其 div 的背景。

$('#myDiv').on('show', function () {

    $("a.myBtn").css({
        'background': 'url(/wp-content/themes/wpbootstrap/bootstrap/img/btn_collapse.png) no-repeat',
        'background-position': 'right 3px'
    });
});

$('#myDiv').on('hide', function () {

    $("a.myBtn").css({
        'background': 'url(/wp-content/themes/wpbootstrap/bootstrap/img/btn_expand.png) no-repeat',
        'background-position': 'right 3px'
    });

});
4

2 回答 2

1 
$('#myDiv').on({
  'show':function() {
        //in the line below, $(this) represents $("#myDiv");
        $(this).doSomething();
        $("a.myBtn").removeClass("expand").addClass("collapse");
   },
   'hide':function(){
        $("a.myBtn").removeClass("collapse").addClass("expand");
   }
});
于 2013-10-21T02:06:52.827 回答
0

我会尝试通过创建两个 CSS 类来简化这一点，例如

.expanded {
  background: ....
}

.collapsed{
  background: ....
}

在你的 jquery 中你可以只有一个处理程序$(".myBtn").on ('click') ....

在您的处理程序中，您可以检查 usinghasClass ()以查看它是否来自哪个状态，然后使用addClass并removeClass更改 css 类

例如

  if ($(this).hasClass ('expanded') {
     $(this).addClass ('collapsed');
     $(this).removeClass ('expanded');

  }
于 2013-10-21T02:00:32.797 回答