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

jQuery切换活动状态

1 个答案: