admin管理员组

文章数量:1200985

I have a responsive Materialize navbar with a few link items. The issue is that when a link is clicked in the sidenav, the sidenav remains visible. The only way I can hide it is to click outside the menu. Is there a way to hide the sidenav when a link is clicked?

My code: 

<!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=".1.3/jquery.js"></script>

        <!-- Materialize icons -->
        <link rel="stylesheet" href="+Icons">
        <!-- Materialize CSS -->
        <link rel="stylesheet" href=".0.0-beta/css/materialize.min.css">
        <!-- Materialize JavaScript -->
        <script src=".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>

/

I have a responsive Materialize navbar with a few link items. The issue is that when a link is clicked in the sidenav, the sidenav remains visible. The only way I can hide it is to click outside the menu. Is there a way to hide the sidenav when a link is clicked?

My code: 

<!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
Share Improve this question asked May 11, 2018 at 15:01 user9621840user9621840 1
  • 2 this works by using <a class="sidenav-close" ... nowadays – x29a Commented Sep 4, 2018 at 14:50
Add a comment  | 

3 Answers 3

Reset to default 14

You can simply add class="sidenav-close" to your 'ul'. This will wrap all your links. So when you click anything inside the 'ul' the sidebar will be closed.

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

Change your sidebar init to this:

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

Updated fiddle.

You can target the li tags inside your sidenav, and with the help of Materialize function sidebar you can close the element with not much effort

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

Sidenav docs

Hope this helps :)

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

本文标签： javascriptHow to hide sidenav in Materialize CSS when link is clickedStack Overflow

版权声明：本文标题：javascript - How to hide sidenav in Materialize CSS when link is clicked? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738555807a2098262.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。