Question

我有2个可以打开两个不同div的clickeable类。

我试图让活跃的班级保持悬停的背景，只要它打开。

尝试了一个跨度，但没有做到这一点。有小费吗？我为节目http://jsfiddle.net/Qskxa/12/

创造了一个小提琴

Jquery代码

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
});

Answer 1

试试这个（http://jsfiddle.net/Qskxa/14/）：

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
        $('#artistsbox li span.active').removeClass('active');
        var $this = $(this);
        if($this.next("div").is(":hidden()")) $this.addClass('active');
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
});

请注意，我更改了CSS并添加了活动类。

Answer 2

只需创建新的css类active：

#artistsbox li span.active,
#artistsbox li span:hover{
background-color:#250109;
   -webkit-transition: background 0.1s linear;
        -moz-transition: background 0.1s linear;
        -ms-transition: background 0.1s linear;
        -o-transition: background 0.1s linear;
        transition: background 0.1s linear;

}

并更新您的点击功能，以便将该类放在点击的元素上：

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);        
        $("#artistsbox li span").removeClass("active");//remove active class from any other element that could be clicked previously
        $this.addClass("active");
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
});

Demo

Answer 3

 http://jsfiddle.net/Praveen16oct90/Qskxa/15/

请注意，我已经为每个范围提供了id以供您理解。

 jQuery(document).ready(function() {
jQuery('.toggle_hide').hide();

jQuery("#d1").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    $this.css("background-color","#250109");
     $("#d2").css("background-color"," #ffffec");
    $this.next("div").fadeToggle(200);
    $('.toggle_hide').not($this.next("div")).fadeOut(800);
});

jQuery("#d2").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    $this.css("background-color","#250109");
    $("#d1").css("background-color"," #ffffec");
    $this.next("div").fadeToggle(200);
    $('.toggle_hide').not($this.next("div")).fadeOut(800);
});

}）;

Answer 4

试试这个 - http://jsfiddle.net/Qskxa/16/

jQuery(document).ready(function() {
  jQuery('.toggle_hide').hide();

  jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    var hasClass = $this.hasClass('active');
    $("#artistsbox li span").removeClass('active');
    if(!hasClass) $this.addClass('active');
    $this.next("div").fadeToggle(200);
    $('.toggle_hide').not($this.next("div")).fadeOut(800);
  });
});

*注意 - 更改css部分如下

#artistsbox li span:hover, #artistsbox li span.active{
   background-color:#250109;
   -webkit-transition: background 0.1s linear;
   -moz-transition: background 0.1s linear;
   -ms-transition: background 0.1s linear;
   -o-transition: background 0.1s linear;
   transition: background 0.1s linear;
}

更改活动类的背景颜色

4 个答案: