logo标签列表

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

javascripthtmlmaterialize
9

我有一个响应式的Materialize导航栏，其中有一些链接项。问题在于，当侧边栏中的链接被点击时，侧边栏仍然可见。唯一的隐藏方式是在菜单外面点击。是否有一种方法可以在链接被点击时隐藏侧边栏？

我的代码：

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

2
现在，这是通过使用<a class="sidenav-close" ...来实现的。 - x29a
3个回答
14

您只需将 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>
更加简洁的解决方案 - Blasco
感谢您的回答。 - sachin rathod
8
将您的侧边栏初始化更改为以下内容：
$(document).ready(function(){
    $('.sidenav')
        .sidenav()
        .on('click tap', 'li a', () => {
            $('.sidenav').sidenav('close');
        });
});

更新了代码演示。

它似乎对我不起作用。我错过了什么吗？https://jsfiddle.net/MihkelPajunen/ouucdv0h/1/ - user9621840
你需要在初始化.sidebar()之后添加它。我会更新答案以使其更清晰。 - tao
现在检查一下这个小工具。我链接了侧边栏初始化和click tap监听器。 - tao
2
你可以通过 Materialize 中的 sidebar 函数，轻松地关闭侧边栏中的 li 标签。
$('.sidenav li').click(() => {
  $('.sidenav').sidenav('close');
})

希望这可以帮到您：

侧边栏文档

祝您好运 :)

$('.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>

1
你正在为每个 li 添加一个 click 事件监听器，而不是为整个侧边栏添加一个监听器。此外，如果在绑定后添加了菜单项，则单击这些菜单项不会关闭侧边栏。 - tao
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接