如何在Materialize CSS中点击侧边栏链接时隐藏Sidenav？

嗨，这个问题其实很好解决~ Materialize的Sidenav组件本身提供了手动关闭的方法，我们只需要给侧边栏里的每个链接绑定点击事件，触发关闭动作就可以了。

具体实现步骤 #

• 在你初始化Sidenav的jQuery代码后面，添加一段事件监听代码，选中侧边栏（#mobile-demo）里的所有链接，当点击时调用Sidenav的close()方法。

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navbar</title>
    <!-- jQuery (must be loaded before material design javascript)-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <!-- Materialize icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <!-- Materialize JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <!-- Initialize "sidenav-trigger" using jQuery -->
    <script>
        $(document).ready(function(){
            // 初始化Sidenav
            $('.sidenav').sidenav();
            
            // 给侧边栏链接绑定点击关闭事件
            $('#mobile-demo li a').on('click', function() {
                $('.sidenav').sidenav('close');
            });
        });
    </script>
</head>
<body>
    <nav>
        <div class="nav-wrapper">
            <div class="container">
                <a href="#" class="brand-logo">Logotype</a>
            </div>
            <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <div class="container">
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <ul class="sidenav" id="mobile-demo">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</body>
</html>

原理说明 #

Materialize的Sidenav组件提供了close()这个API方法，用来手动关闭侧边栏。默认情况下，只有点击触发按钮或者侧边栏外部区域才会触发关闭，所以我们通过给侧边栏内的链接添加点击事件，主动调用这个方法，就能实现点击链接后自动隐藏Sidenav的效果啦。

内容的提问来源于stack exchange，提问作者user9621840