jquery - 如何使用 jQuery 进行元切换

Question

我在一个页面上有许多 div。每个 div 的右上角是一个图标。当用户单击图标时，它会显示/隐藏 div。这是代码：

$('div#display-area').on('click', 'span.fold-post-link', function() {        
    $('div.fold-post', $(this).parents('div.display-content')).toggle('blind');
});

现在，在页面的最顶部我有两个图标 - 一个是向上箭头，另一个是向下箭头。当用户单击向上箭头时，我希望它隐藏所有 div；当他们单击向下箭头时，我想显示所有 div。

最初我以为我可以用一个函数来做到这一点，例如：

// fold and unfold all posts
$('div#display-area').on('click', '#master-folder', function() {      
    $('div.fold-post', 'div#display-area').toggle('blind');
});

但这并不好，因为它会访问每个 div 并反转其状态。这意味着如果我有一些可见的 div，它们就会被隐藏，反之亦然！

Answer 1

我不认为你可以使用单一的方法来做到这一点

$('div#display-area').on('click', '#up-folder', function() {      
    $('div.fold-post', 'div#display-area').hide('blind');
});
$('div#display-area').on('click', '#down-folder', function() {      
    $('div.fold-post', 'div#display-area').show('blind');
});

另一种思路如下

$('div#display-area').on('click', '#up-folder, #down-folder', function() {      
    var action = $(this).is('#up-folder');
    $('div.fold-post', 'div#display-area')[action]('blind');
});

Answer 2

var action = 'hide';

$('div#display-area').on('click', '#master-folder', function() {      
    var $divs = $('div.fold-post', 'div#display-area');
    if (action == 'hide') {
        $divs.hide('blind');
        action = 'show';
    }
    else {
        $divs.show('blind');
        action = 'hide';
    }
});