<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<style type="text/css">
ul{
background: pink;
}
ul li{
color: blueviolet;
list-style-type: none;
}
ul li.specail{
background: #23527C;
}
</style>
</head>
<body>
<ul class="list">
<li>one</li>
<li class="specail">two</li>
<li>three</li>
<li>
<ul class="sublist">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function(){
$('li').on('click',function(e){
//阻止冒泡事件
e.stopPropagation()
//删除所有被点击按钮的兄弟元素
// $(this).siblings().remove();
//点击当前元素，就会将上一个元素隐藏
// $(this).prev().hide()
//删除某个类样式
// $(this).removeClass('specail');
//兄弟元素增加样式
// $(this).siblings().addClass('specail');
// $(this).removeClass('specail');
//
// $('ul').find('.specail').remove();
// $('ul').find('li').filter('.specail').hide()
})
})
</script>
<script type="text/javascript">
$(function(){
$('li').on('click',function(e){
e.stopPropagation()
//点击某个li，判断当前li是否拥有某种样式
if ($(this).is('.specail')) {
alert("有这个样式")
}else if($(this).not('.specail')){
alert('没有这个样式')
}
if($(this).parent().is('.sublist')){
$(this).hide()
}
})
})
</script>
</body>
</html>