带有扩展菜单的侧边栏。 [提供图表]

Question

我花了大约一个小时试图找到一个可行的解决方案，但是，它们都没有接近我想要的目标。我不希望有人花时间为我创建它（它需要做很多工作），但我想知道如何实现它。链接或 js 小提琴会很棒。

所以我正在处理这个侧边栏。它应该具有三种状态。

第一个和第二个状态显示在桌子上。 默认状态是加载侧边栏时。

第二种状态是当用户点击在第一个图像中看到的一个图标图像时发生的情况。它现在展开以显示额外的导航。 （例如，图标说朋友，出现的新菜单有一个大约 10 人的列表）。

第三种状态仅出现在移动设备上。它基本上消除了在默认状态下看到的图标侧边栏（第一张图片）

感谢任何有关如何解决此问题的建议。我尝试了很多不同的东西，但没有一个能接近我想要的。

Answer 1

这是你要找的吗？

var titles = $('.title');
titles.each(function() {
	$(this).on('click', function() {
		$(this).next().toggleClass('active')
	})
});

$('.toggle').on('click', function() {
	$('.sidebar').toggleClass('hide');
});

.toggle {
	position: fixed;
	z-index: 1000;
}
.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: 200px;
	padding-top: 20px;
	border-right: 1px solid black;
}
.group {
	margin-top: 16px;
}
.title {
	cursor: pointer;
	border-bottom: 1px dashed black;
}
.list {
	max-height: 0;
	overflow: hidden;
}
.list li {
	margin-top: 4px;
}

.active {
	max-height: 400px;
}
.hide {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Button</button>
<div class="sidebar">
	<section class="group">
		<h3 class="title">Click me first.</h3>
		<ul class="list">
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
	</section>
	<section class="group">
		<h3 class="title">Maybe click me.</h3>
		<ul class="list">
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
	</section>
	<section class="group">
		<h3 class="title">Nope - click me!</h3>
		<ul class="list">
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
	</section>
</div>