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

Question

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

所以我正在研究这个侧栏。它应该有三种状态。

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

第二种状态是当用户点击第一张图片中看到的图标图像之一时发生的情况。它现在扩展为显示额外的导航。 （例如，Icon说朋友，出现的新菜单有10个人的清单）

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

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

Answer 1

这是你在找什么？

＆＃13;

＆＃13;

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;