css - jQuery 切换事件状态

Question

我正在我的页面上实现这个切换 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;
}

Answer 1

向 span 元素添加另一个类。

在 CSS 中为 span 添加类选择器，这与悬停选择器相同:

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

并在 javascript 中添加:

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

我认为这可能有效。

这里有点简化illustration on 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