切换类按钮不工作

Toggleclass button not working?

本文关键字：工作 按钮      更新时间：2023-09-26

为什么我不能用按钮切换框？我想让它做它现在做的事情，但也切换框？

这是我的小提琴

我的代码：

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

 });
  });
 $(function timelinetiles() {
 $('.button').click(function (e) {
    e.stopPropagation();
 $('.timelineTile').not(this).removeClass('clicked');
 $(this).siblings('.timelineTile').toggleClass('clicked');
  }); });
  $(document).click(function () {
    $('.timelineTile').removeClass('clicked');
  });

您的排除条件not(this)不正确。这里，this是.button元素而不是.timelineTile元素。

所以

$('.button').click(function (e) {
    e.stopPropagation();
    var $timeline = $(this).siblings('.timelineTile').toggleClass('clicked');
    $('.timelineTile').not($timeline).removeClass('clicked');
});

演示：

$(function timelinetiles() {
    $('.timelineTile').click(function (evt) {
        evt.stopPropagation();
        $('.selected').children().not(this).removeClass('clicked');
        $(this).toggleClass('clicked');
    });
});
$(function timelinetiles() {
    $('.button').click(function (e) {
        e.stopPropagation();
        var $timeline = $(this).siblings('.timelineTile').toggleClass('clicked');
        $('.timelineTile').not($timeline).removeClass('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;
}
.button {
    height:50px;
    width:150px;
    background:Red;
    color:white;
    margin:0px 10px 10px 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="timelineTilehold">
    <li class="selected">
        <div class="button">click</div>
        <div class="timelineTile"></div>
    </li>
    <ul class="timelineTilehold">
        <li class="selected">
            <div class="button">click</div>
            <div class="timelineTile"></div>
        </li>
        <ul class="timelineTilehold">
            <li class="selected">
                <div class="button">click</div>
                <div class="timelineTile"></div>
            </li>
        </ul>
    </ul>
</ul>

简化

Js Fiddle

$(function timelinetiles() {
    $('.timelineTile').click(function (evt) {
        evt.stopPropagation();
        $(this).toggleClass('clicked');
    });
});
$('.button').click(function (e) {
    e.stopPropagation();
    $(this).siblings('.timelineTile').toggleClass('clicked');
});
$(document).click(function () {
    $('.timelineTile').removeClass('clicked');
});
相关文章：