jquery - 切换类不起作用?

标签 jquery html css class toggle

我正在尝试打开和关闭“timelineTile”div,如果打开另一个 div 也关闭,当单击背景时也关闭,如果单击另一个 div 和背景,我设法让它关闭,但我可以如果单击 div 本身,则让 div 关闭...这是我的 fiddle

我的代码;

$(function () {
    $('.timelineTile').click(function (evt) {
        evt.stopPropagation();
        $('.selected').children().removeClass('clicked');
        $(this).toggleClass('clicked');
    });


    $(document).click(function () {
        $('.timelineTile').removeClass('clicked');
    });
});
.timelineTile.clicked{
    background:red;
    width:500px;
    height:300px;
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s;
    transition:height 1s, left 1s, transform 1s;
}

.selected {
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s;
    transition:height 1s, left 1s, transform 1s; 
}


.timelineTile {
   background:black; 
    color:white;
    width:200px;
    height:100px;
    margin-bottom:20px;
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s;
    transition:height 1s, left 1s, transform 1s;
}

.timelineTilehold {
    background:pink;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="timelineTilehold">
    
    <li class="selected"><div class="timelineTile">hello
    </div></li>

<li class="selected"><div class="timelineTile">hello
    </div></li>

<li class="selected"><div class="timelineTile">hello
    </div></li></ul>

最佳答案

使用 .not() 这样您就不会删除点击元素上的类

$('.timelineTile').click(function (evt) {
    evt.stopPropagation();
    $('.selected').children().not(this).removeClass('clicked');

DEMO

关于jquery - 切换类不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25936975/

相关文章:

java - 更改 JLabel 的颜色字 rune 本?

javascript - 土坯边缘 : Get this symbol position

html - 在 css 中替代文本 valign

javascript - 将 JavaScript 变量传递给外部 CSS 文件

javascript - jQuery + 无处不在 : Return a document object from a URL

jquery - 放置一个 div,使其看起来位于 mainwrapper (980px) 之外

javascript - jquery延迟ajax调用执行

html - 如何让伪元素尊重直接父元素的宽度并忽略兄弟元素的宽度

jquery - HTML 文本区域值正在重置

javascript - 在表内的下拉列表中选择值时查找行索引