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 回答