0

私は自分のページhttp://www.creativusmouse.com/Hyperion/html/toggles.htmlにこのトグルを実装しており、アクティブなときにトグル ボタンをオレンジ色のままにしたいと考えていました。使用されている CSS および jQuery コードを以下に示します。これは簡単に達成できるものだと思います。誰かが私を助けてくれることを願っています。ありがとうございました ;）

jQuery(window).load(function(){

    $('.toggle-view li').click(function () {

        var text = $(this).children('div.toggle-content');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('<i class="icon-minus"></i>');    
        } else {
            text.slideUp('200');
            $(this).children('span').html('<i class="icon-plus"></i>');    
        }

    });

});

/* ======================== CSS ======================= = */

    .toggle-view {
    margin:0;
    padding: 0;
    list-style-type:none;
}
.toggle-view li {
    margin:0px 0px 25px;
    position:relative;
    cursor:pointer;
    display: block;
    font-weight: bold;
    text-decoration: none;
}

.toggle-view h2 {
    font-size:12px;
    text-transform:uppercase;
    margin:0;
    padding:4px 0 4px 40px;
}
.toggle-view span {
    background: none repeat scroll 0 0 #80acb9;
    color: #fff;
    font-size: 12px;
    padding: 2px 4px 2px 2px;
    position: absolute;
    left: 0px;
    top: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.toggle-view li:hover h2 {
}
.toggle-view li:hover span {
    background: none repeat scroll 0 0;
    background:#F63;
    color:#fff;
}
.toggle-view .toggle-content {
    box-sizing: content-box;
    display:none;
    padding:10px 35px;
}
.toggle-view ul.square, .toggle-view ul.circle, .toggle-view ul.disc {
    margin-left:20px;
}
4

1 に答える 1

1

span 要素に別のクラスを追加します。

CSS では、スパンのクラス セレクターを追加します。これは、ホバー セレクターと同じです。

.activetoggle, .toggle-view li:hover span {
    background: none repeat scroll 0 0;
    background:#F63;
    color:#fff;
}

そしてJavaScriptで追加：

$(this).children('span').toggleClass('activetoggle');

これはうまくいくかもしれないと思います。

これはjsfiddleの少し簡略化された図です

更新: jsfiddle をマークアップとコードで更新し、li要素でクラスを切り替えました

$('.toggle-view li').click(function () {
        var text = $(this).children('div.toggle-content');
        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('<i class="icon-minus"></i>');    
        } else {
            text.slideUp('200');
            $(this).children('span').html('<i class="icon-plus"></i>');    
        }    
        $(this).toggleClass('activetoggle');
});

すべてを少し単純化するために =) CSS セレクターは になり.activetoggle spanました。

jsfiddle

于 2013-05-13T22:47:21.770 に答える