I. Achieving results
1. All members are hidden before clicking on the group heading
2. After clicking on the group heading, hide to show and hide to show.
3. When clicking on a grouping heading, hide the other groupings that have been expanded.
Two, code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//siblings() can find sibling elements of this element
var $hide=$(".group").siblings();
//Set all members to hide
$hide.hide();
//Set the CSS to display "Hand" when the title is clicked
$(".group").css("cursor","pointer");
//Set the click event of the group header label with class="group"
$(".group").click(function() {
//Give this sibling element under the click tag a new variable
var $hide=$(this).siblings();
//If its sibling elements are displayed, hide them, otherwise let them be displayed, and hide sibling elements under other groups.
if($($hide).is(":visible")){
$hide.hide();
}else{
$hide.show();
//In addition to this group, sibling elements of other groups are hidden
$(".group").not(this).siblings().hide();
}
});
});
</script>
<style type="text/css">
div *{
display:block;
width:200px;
}
div span{
background-color : #0f0;
}
</style>
</head>
<body>
<div>
<span class="group">My good friend</span>
<a>Life Insurance</a>
<a>Fu De life</a>
</div>
<div>
<span class="group">Special care</span>
<a>No face monster</a>
<a>baby</a>
</div>
</body>
</html>3. Teacher's code (I don't think I understand it very well)
$(document).ready(function(){
$("a").hide();
$("span").css("cursor","pointer").click(function() {
$(this).nextAll().toggle().parent().siblings().children().filter("a").hide();
//All span's Brothers Hide
/* $(this).nextAll().toggle();
$(this).parent().siblings().children().filter("a").hide(); */
/*nextAll() All the brothers behind*/
/*
toggle() Switch Hide() and How () to check whether each element is visible. If the element is hidden, run show ().
If the element is visible, the element hide(). In this way, the switching effect can be created.
*/
/*siblings() All brothers */
/*parent() Parent element */
/*children([...]) Get all the child elements */
/*filter() Select the set of elements that match the specified expression */
});
});This sentence can be divided into two sentences, one is a commentary.
$(this).nextAll().toggle().parent().siblings().children().filter("a").hide();Namely
$(this).nextAll().toggle();
$(this).parent().siblings().children().filter("a").hide();Dividing it into two sentences is easier to understand than my own code.