Làm thế nào để vượt qua $ (this) để chọn

Question

Tôi có một handler nhấp chuột jquery mà Toggles một trong những yếu tố danh sách:

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

Với nó, tôi có thể thay đổi yếu tố tôi nhấp mở rộng và sụp đổ nó.

Nhưng nếu tôi chỉ muốn một phần tử được mở rộng và đã mở rộng phần tử trước đó để đóng khi tôi nhấp vào một yếu tố khác?

Tôi muốn thực hiện việc này qua cả hai $(this) (nhấp vào li) và li.expanded tới bộ chọn jQuery cho toggleClass('expanded').

Giống như (nhưng điều này không làm việc):

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

Cảm ơn trước!

UPD: Tôi cần chức năng này để hoạt động ngay cả khi không có phần tử nào được mở rộng trước (trên trang bắt đầu) và có thể thu gọn phần tử được mở rộng trước đó khi tôi nhấp vào nó.

nó không hoạt động một cách chính xác nếu sử dụng (không mở rộng mục đầu tiên):

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

nhưng hoạt động tốt với:

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

Answer 1

Chỉ cần thay đổi vị trí của các đối số truyền cho selector. Bộ chọn jquery chấp nhận tham số thứ hai context. nơi bạn có thể vượt qua bối cảnh hiện nay this:

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

đó sẽ là tương đương với:

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

Full Snippet:

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

Answer 2

Bạn cần phải trao đổi!

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

Đây là mã của bạn. Theo ngữ cảnh, this sẽ đến tiếp theo!

Answer 3

tôi nghĩ rằng bạn cần

$(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 
}); 

Answer 4

ToggleClass không làm việc trong hoàn cảnh của bạn.sự sụp đổ của nó Sử dụng addClass tất cả của li và removeClass thay vì

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

Answer 5

Bạn có thể loại bỏ lớp 'mở rộng' từ khắp nơi li yếu tố và thêm nó vào nhấp một:

Mã này

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

làm không hoạt động trong trường hợp này

LÀM VIỆC DEMO

$(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>