【问题标题】:Toggleclass not working?切换类不起作用?
【发布时间】:2014-09-19 15:04:41
【问题描述】:

我试图让'timelineTile' 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>

【问题讨论】:

  • 您需要在文档点击方法中返回 false。否则事件的冒泡会导致被点击的类再次切换
  • 如果我删除它然后停止'如果单击另一个则关闭'

标签: jquery html css class toggle


【解决方案1】:

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

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

DEMO

【讨论】:

  • 不是必须的,但是看看新的Stack Snippets,这样就不需要链接jsfiddler了。
  • @gunr2171 是的,我知道,但我不喜欢堆栈 sn-ps 创建的格式。
猜你喜欢
  • 2017-09-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-19
  • 1970-01-01
相关资源
最近更新 更多