1

2 つの異なる div を開く 2 つのクリック可能なクラスがあります。

アクティブなクラスが開いている限り、ホバリングの背景を保持するようにしようとしています。

スパンを試しましたが、うまくいきませんでした。任意のヒント ？ショーhttp://jsfiddle.net/Qskxa/12/のフィドルを作成しました

Jクエリコード

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 に答える