1

我有 2 个可点击的类，它们打开两个不同的 div。

我试图让活动类保持悬停的背景，只要它打开。

尝试了一个跨度，但这并没有奏效。有小费吗 ？我为表演创建了一个小提琴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);
    });
});
4

4 回答 4

3

试试这个（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 并添加了活动类。

于 2013-04-09T10:03:14.550 回答
1

只需创建新的 css 类活动：

#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);
    });
});

演示

于 2013-04-09T10:03:28.940 回答
1 
 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);
});

});

于 2013-04-09T10:07:26.437 回答
1

试试这个 - 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;
}
于 2013-04-09T10:07:35.923 回答