Jquery 如何创建侧滑子菜单？_Jquery_Html_Css_Web Deployment

Jquery 如何创建侧滑子菜单？

jquery html css

Jquery 如何创建侧滑子菜单？,jquery,html,css,web-deployment,Jquery,Html,Css,Web Deployment,我管理了一个带有菜单按钮的垂直滑动侧菜单。当我点击它时，一个菜单从左边出现/消失。我希望在单击具有子菜单的菜单项时达到相同的效果。我做了很多尝试，但都没有运气。我很感激任何关于如何修改或添加我的代码的建议。（我知道我必须添加一些过渡…）很明显，我对这一切都是新手。提前谢谢，贝斯特 HTML代码： <!DOCTYPE html> <html lang="sp" > <head> <meta charset="UTF-8"

我管理了一个带有菜单按钮的垂直滑动侧菜单。当我点击它时，一个菜单从左边出现/消失。我希望在单击具有子菜单的菜单项时达到相同的效果。我做了很多尝试，但都没有运气。我很感激任何关于如何修改或添加我的代码的建议。（我知道我必须添加一些过渡…）

很明显，我对这一切都是新手。提前谢谢，贝斯特

HTML代码：

<!DOCTYPE html>
<html lang="sp" >
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Menúes</title>

        <link rel="stylesheet" type="text/css" href="css/menup.css" />

         <script src="js/jquery203.js"></script> 

         <script src="js/menup.js"></script>        

    </head>
    <body>
        <!-- Navigation -->
        <div class="container">
            <div id="sidebar">
                <ul class="menu">
                    <li class="parent"><a href="#" class="home">Home  ></a></li>
                        <ul class="submenu">
                            <li><a href="#" class="home">Home 11</a></li>
                            <li><a href="#" class="users">Home 12</a></li>
                            <li><a href="#" class="signout">Home 13</a></li>
                        </ul>   
                    <li><a href="#" class="explore">Explore</a></li>
                    <li><a href="#" class="users">   Users</a></li>
                    <li><a href="#" class="signout">   Sign Out</a></li>
                </ul>                  
            </div>
            <div class="main-content">                  
                <a href="#" data-toggle=".container" id="sidebar-toggle">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                </a>
                <div class="content">                       
                </div>
            </div>
        </div>  
    </body>
</html>

JS代码，它不会以任何方式显示子菜单

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
    $('parent').click(function() {
         $('.submenu').toggleClass('visible');
     });

  });

使用此选项时，您将忘记放置指示器

。父项

检查下面的代码，您只需对子菜单使用

切换

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
    $('.parent').click(function() {
         $('.submenu').toggle('visible');
     });

  });

我实现了我的目标，因为我是html5+css3新手，我不知道这是否是最好的方法。我愿意接受任何改进的建议。以下是基本代码：

检查我的答案@rossig7

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
    $('.parent').click(function() {
         $('.submenu').toggle('visible');
     });

  });

$(document).ready(function() {
  $(".main-content").click(function() {
    $(".container").toggleClass("open-sidebar");
  });
});