활성 클래스의 배경색 변경

Question

2 개의 다른 div를 열 수있는 2 개의 clikeable 클래스가 있습니다.

활발한 클래스가 호버링 배경을 길게 유지하도록 만들기 위해 노력하고 있습니다.

스팬을 시도했지만 트릭을 수행하지 않았습니다. 팁이 있습니까? 나는 쇼 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/) 시도 : 나는 CSS를 변경하고 활성 클래스를 추가

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

참고.

Answer 2

간단하게 활성 새로운 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); 
    }); 
}); 

Demo

Answer 3

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

참고 내가 이해할 수 있도록 각 범위마다 이드를 주었다.

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

* 주 -

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