这就是我想要的：当我点击用户名（在标题中）时，显示侧边栏。这仅适用于 nav 标签，我必须使用 a 标签。在按钮不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/icon.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/materialize.min.css">
<title>Dashboard</title>
</head>
<body>
<ul id="side-setting" class="side-nav">
<li><a href="#">ver perfil</a></li>
<li><a href="#">editar perfil</a></li>
<li><a href="/logout/">cerrar sesion</a></li>
</ul>
<nav class="teal" role="navigation">
<div class="nav-wrapper container-fluid">
<ul class="hide-on-med-and-down">
<li><a href="#">Inicio</a></li>
<li><a href="#">Grupos</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li>
<a href="#" data-activates="side-setting" class="navbar-collapse">username</a>
</li>
</ul>
</div>
</nav>
<a href="#" data-activates="side-setting" class="button-collapse">here</a>
<button class="btn" data-activates="side-setting" class="button-coll">sidenav</button>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
(function($){
$(function(){
$('select').material_select();
$('.button-collapse').sideNav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery); // end of jQuery name space
我如何添加此侧边栏？当我点击位于标题（导航）
中的按钮或用户名时，我希望此浮动向右移动