[点击链接时如何在Materialize CSS中隐藏sidenav？

问题描述 投票：2回答：3

我有一个带有一些链接项的响应性Materialize导航栏。问题是，当在sidenav中单击链接时，sidenav仍然可见。我可以隐藏它的唯一方法是在菜单外单击。单击链接时是否可以隐藏sidenav？

我的代码：

<!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();
            });
        </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>

https://jsfiddle.net/MihkelPajunen/ouucdv0h/

javascript html materialize
3个回答
3
投票

将侧边栏初始化更改为此：

$(document).ready(function(){
    $('.sidenav')
        .sidenav()
        .on('click tap', 'li a', () => {
            $('.sidenav').sidenav('close');
        });
});

更新fiddle。

1
投票

您可以将sidenav内的li标签作为目标，并借助Materialize函数sidebar，可以轻松完成元素的关闭操作

$('.sidenav li').click(() => {
  $('.sidenav').sidenav('close');
})

Sidenav docs

希望这会有所帮助：）

$('.sidenav li').click(() => {
  $('.sidenav').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();
            });
		</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>
0
投票

您可以简单地将class="sidenav-close"添加到您的'ul'中。这将包装所有链接。因此，当您单击“ ul”内的任何内容时，侧栏将关闭。

    <ul class="sidenav sidenav-close" 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.