jQuery的隱藏無類的所有元素

Question

我的jQuery的一個簡單的位來回切換類「主動」一次點擊的李：

$('li').click(function() { 
    $(this).toggleClass('active'); 
}); 

什麼話，我希望發生的是具有列表中的每個其他利隱藏（顯示：無），然後當你再次點擊活動li時，它將刪除活動類，但將其他所有li也設置爲可見。這就是我正在努力實現的。

我試過在click函數中使用if語句來檢查「active」類是否存在，並且它是否將所有li設置爲隱藏，並且如果它沒有設置css以再次顯示它們，但這不起作用。

編輯：

tilz0R的回答幾乎是我一直在尋找的是，我只是修改了它稍微滿足我的需求。

$('li').click(function() { 
    $(this).toggleClass('active').siblings().toggleClass('hidden'); 
}); 

隱藏類只具有顯示：無，這樣所有其他的李的是從被點擊，然後所有人都在活動裏的第二次點擊再次顯示了一個隱藏分開。

Answer 1

你必須找到目前li元素的兄弟姐妹。

$('li').click(function() { 
    $(this).toggleClass('active').siblings().hide(); 
}); 

Answer 2

當你點擊任何<li>標籤，所有<li>標籤將只是選擇<li>隱藏。再次單擊，然後所有<li>標籤都會顯示並刪除活動類。

HTML：

<ul> 
    <li>first</li> 
    <li>second</li> 
    <li>third</li> 
    <li>forth</li> 
</ul> 

的jQuery：

jQuery('ul li').click(function() { 
     if(jQuery(this).hasClass('active')) { 
     jQuery(this).removeClass('active'); 
     jQuery('ul li:not(".active")').show(); 
     } else { 
     jQuery('ul li').removeClass('active'); 
     jQuery(this).addClass('active'); 
     jQuery('ul li:not(".active")').hide(); 
     } 
    }); 

Answer 3

只需使用addClass，removeClass和show()/hide()

$('li').click(function() { 
 
    if ($(this).hasClass('active')) { 
 
    $('li').show(); 
 
    $(this).removeClass('active'); 
 
    } else { 
 
    $('li').hide(); 
 
    $(this).addClass('active').show(); 
 
    } 
 
});

li { 
 
    cursor: pointer; 
 
} 
 

 
.active { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ol> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
</ol>