<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
border-style: none;
list-style: none;
}
#outer {
color: #FFF;
background-color: #4679B5;
width: 80px;
cursor: pointer;
margin: 100px 100px;
padding-left: 5px
}
p {
background: url(images/close.gif) no-repeat left center;
text-align: center;
}
ul {
padding-top: 10px;
}
ul li {
display: none;
}
dd {
text-align: center;
}
.change-ul p {
background-image: url(images/open.gif);
}
.change-ul li {
display: block;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="outer">
  <ul>
    <p>事件</p>
    <li>
      <dd>今天</dd>
      <dd>本周</dd>
      <dd>本月</dd>
    </li>
  </ul>
  <ul>
    <p>娱乐</p>
    <li>
      <dd>今天</dd>
      <dd>本周</dd>
      <dd>本月</dd>
    </li>
  </ul>
  <ul>
    <p>人物</p>
    <li>
      <dd>今天</dd>
      <dd>本周</dd>
      <dd>本月</dd>
    </li>
  </ul>
</div>
<script>
$(document).ready(function(e) {
            $("p").click(function(){
//实现效果
$(this).parent().toggleClass("change-ul").siblings().removeClass("change-ul");
});
        });
    </script>
</body>
</html>