+Tenus One <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> <title>Bootstrap 101 Template</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style type="text/css"> .special{ color: blue; } </style> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <ul class="list"> <li>one</li> <li class="special">two</li> <li>three</li> <li> <ul class="sublist"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- <script src="js/bootstrap.min.js"> --> <script type="text/javascript"> $(function(){ //section one $('li').on('click',function(){ // 例子1 // $(this).next().hide();//点击下一个隐藏 //例子2 // $(this).next().remove(); //例子3 // $(this).siblings().remove();//相邻的函数 //例子4 // $(this).siblings().addClass('special'); //例子5 // $(this).removeClass('special'); // $(this).siblings().addClass('special'); //例子6 // $(this).parent().addClass('special'); //例子7 // $(this).closest('.list').addClass('special');//向上找list }) //过滤 section two $('.list').on('click',function(){ //例子1 // $(this).find('li').addClass('special'); //例子2 // $(this).find('li').filter(':first').addClass('special'); //例子3 // $(this).find('li').filter('.special').remove(); // 或者 // $(this).find('.special').remove(); // find是非常good }) //section three // 第一块 $('li').on('click',function(){ //例子1 // $(this).hide(); // if($(this).is('.special')){ // alert('special'); // } //例子2 // $(this).hide(); // if($(this).not('.special')){ // alert('not special'); // } }) //section four // 第二块 //例子3 只想在子元素点击隐藏一个li $('li').on('click',function(){ console.log('clicked li'); if($(this).parent().is('.sublist')){ $(this).hide(); } }) }) </script> </body> </html>