Question

我想要做的是，当你点击'John Brown'时，你会看到顶部的第一个元素变成黑色。当你再次点击它时，虚线圆圈的边框消失，然后当你再次点击“John Brown”时，你会看到别的东西，然后最后它再次消失。

我想要实现的是当你点击它一次，一切都变成黑色（就像现在一样），然后你再次点击它，一切都消失并回到原始状态。

重要的区别，我的意思是......当没有点击框中的一个名字时。因此，如果你点击John Brown然后转移到Jack Dorsey，那么顶部的＃1应该保持黑色。但是如果你再次点击Jack Dorsey，即你没有点击它，它就会消失。

另外，如何将其收紧，以便更快地响应。现在当你点击它时，感觉它在点击它和它响应之间有一点点滞后。

Edit1：如果有人对此感兴趣...将使用的用户界面是我的webapp - http://www.compversions.com

Answer 1

第一个切换功能会每隔一次点击运行一次，因此您每隔一次点击就会添加/删除.dash-elem-selected和.bc-dotted-to-solid。两个.dash-elem-selected，后跟两个关闭，加上实心/虚线边框，每隔一次点击就会给出四种状态。由于你已经在使用单独的函数，有一个添加类（即设置“on”状态），另一个删除它们（即设置“off”状态）。

$(document).ready(function() {
    $('#panels tr table tr').toggle(function () {
        var $this = $(this),
            tr_class = 'dash-elem-selected';
        if (!$this.parent('thead').length) {
            $this.addClass(tr_class).siblings().removeClass(tr_class);
            var idx = $.trim($this.parents('td table').siblings('.sit-in-the-corner').text());
            var spans = $('#bc' + idx + ' span');
            spans.addClass('bc-dotted-to-solid');
            spans.filter('.dashed-circle').css({ 'border' : '5px solid #000'});
        }
    }, function() {
        var $this = $(this);
        var idx = $.trim($this.parents('td table').siblings('.sit-in-the-corner').text());
        var spans = $('#bc' + idx + ' span');
        spans.removeClass('bc-dotted-to-solid');
        spans.filter('.dashed-circle').css({ 'border' : '5px dotted #bdbebf' });
    });
});

.dash-elem-selected类需要一个color: black（或某些，但这与设计的其余部分一致），以显示已选择特定项目。

Answer 2

http://jsfiddle.net/timmywil/BMWZd/23/我只做了第一步和第二步。我相信你可以从那里拿走它。

为什么以下Toggle功能执行四种不同的操作而不是两种？

2 个答案: