如何通過$（this）來選擇器

我有切換列表元素的一個jQuery的點擊處理程序：

$(document).on('click', 'ul li', function() { 
    $(this).toggleClass('expanded'); 
});

有了它，我可以改變我元素點擊展開和摺疊它。

但是，如果我想只有一個元素，以擴大和之前展開的元素關閉，當我點擊到另一個呢？

我想要做到這一點通過$(this)（點擊li）和li.expanded jQuery選擇器爲toggleClass('expanded')。

類似的信息（但不工作）：

$(document).on('click', 'ul li', function() { 
    $(this, 'ul li.expanded').toggleClass('expanded'); 
});

提前感謝！

UPD： 我需要這個功能，即使沒有元素是以前擴大（在頁面上開始）的工作，並能崩潰當我點擊它之前展開的元素。

它不起作用正確，如果使用（不展開的第一項）：

$('li.expanded', this).toggleClass('expanded');

但工作正常：

$('li.expanded').toggleClass('expanded'); 
$(this).toggleClass('expanded');

來源

2015-06-26 s.webbandit

只是改變傳遞給選擇的參數的位置。 jQuery選擇接受第二參數context。在這裏您可以通過當前上下文this：

$('ul li.expanded',this).toggleClass('expanded');

這將等同於：

$(this).find('ul li.expanded').toggleClass('expanded');

全段：

$(document).on('click', 'ul li', function() { 
    $('ul li.expanded').not($(this).find('ul li.expanded')).removeClass('expanded'); 
    $('ul li.expanded',this).toggleClass('expanded'); 
});

來源

2015-06-26 08:20:52

請看看我的更新問題 –

我認爲這隻會切換爲點擊的元素擴展類，但它不會從以前的.expanded元素 – kapantzak

@s刪除此類。 webbandit：檢查更新後的代碼片段... –

您需要交換！

$('ul li.expanded', this).toggleClass('expanded');

這是你的代碼。上下文this應該來下！

來源

2015-06-26 08:21:11

我想你需要

$(document).on('click', 'ul li', function() { 
    $(this).addClass('expanded'); //Add class to current li 
    $('ul li.expanded').not(this).toggleClass('expanded'); //Toggle class from other li's 
});

來源

2015-06-26 08:25:32 Satpal

ToggleClass不是在你的背景下工作。其崩潰所有李時珍使用addClass與removeClass代替

$(document).on('click', 'ul li', function() { 
    $('ul li.expanded').removeClass('expanded'); // remove class expanded 
    $(this).addClass('expanded'); // add class current li 
});

來源

2015-06-26 08:28:32

那麼這是不可能的用一種方法做到這一點？ –

@ s.webbandit - 你只是在你的問題中講過「但是如果我只想要擴展一個元素，並且以前擴展的元素在我點擊另一個元素時關閉，怎麼辦？ –

您可以刪除類從所有li元素「擴大」，並把它添加到點擊一個：

此代碼

$('ul li.expanded',this).toggleClass('expanded');

做在這種情況下不起作用

工作示例

$(document).on('click', 'ul li', function() { 
 
    $('ul li').removeClass('expanded'); 
 
    $(this).addClass('expanded'); 
 
});

li.expanded { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="expanded">test</li> 
 
    <li>test2</li> 
 
    <li>test3</li> 
 
    <li>test4</li> 
 
</ul>

來源

2015-06-26 08:30:29 kapantzak

如何通過$（this）來選擇器

回答

相關問題