Jq垂直手风琴效果

代码

<ul class="mainmenu">
	<li>
		<img src="user.png" alt="User icon" class="icon">
		<span>Account</span>
	</li>
	<ul class="submenu" style="display: block;">
		<div class="expand-triangle"></div>
		<li><span>Basics</span></li>
		<li><span>Picture</span></li>
		<li><span>Go Premium</span></li>
	</ul>
	<li>
		<img src="envelope.png" alt="Envelope icon" class="icon">
		<span>Messages</span>
		<div class="messages">23</div>
	</li>
	<ul class="submenu" style="display: none;">
		<div class="expand-triangle"></div>
		<li><span>New</span></li>
		<li><span>Sent</span></li>
		<li><span>Trash</span></li>
	</ul>
	<li>
		<img src="cog.png" alt="Cog icon" class="icon">
		<span>Settings</span>
	</li>
	<ul class="submenu" style="display: none;">
		<div class="expand-triangle"></div>
		<li><span>Language</span></li>
		<li><span>Password</span></li>
		<li><span>Notifications</span></li>
		<li><span>Privacy</span></li>
		<li><span>Payments</span></li>
	</ul>
	<li><img src="key.png" alt="Key icon" class="icon"><span>Logout</span></li>
</ul>

引入的css

<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="default.css">

引入的js

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>