Question

侧边栏切换在桌面上正常工作。当点击切换按钮菜单隐藏时，点击切换按钮菜单后也会打开。但是没有在移动设备上工作。当手机点击切换按钮菜单时无法打开。

这是html代码

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">

    <nav class="navbar navbar-static-top" role="navigation">


      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </nav>
  </header>


  <aside class="main-sidebar">

    <section class="sidebar">



      <ul class="sidebar-menu">


        <li><a href="../admin/index.php"><i class="fa fa-user"></i> <span>Admin</span></a></li>

        <li><a href="../workplan/"><i class="glyphicon glyphicon-time"></i><span> Workplan</span></a></li>

        <li><a href="../activity/"><i class="fa fa-television" ></i><span> Activities</span></a></li>

        <li><a href="../calendar/"><i class="fa fa-calendar"></i><span>Calendar</span></a></li>

        <li><a href="../contacts/"><i class="fa fa-users"></i><span>Contacts</span></a></li>

        <li><a href="../venue/"><i class="glyphicon glyphicon-map-marker"></i><span>Venue</span></a></li>

        <li><a href="../purchaseOrder/"><i class="fa fa-dollar"></i><span>Activity Cost</span></a></li>

        <li><a href="../templates/"><i class="fa fa-columns"></i><span>Templates</span></a></li>

        <li><a href="../report/"><i class="glyphicon glyphicon-folder-open"></i><span> Reports</span></a></li>



    </section>

  </aside></body>

这是切换菜单的功能

 $("a.sidebar-toggle").click(function(){
      $("body").removeClass("hold-transition");
      $("body").toggleClass("sidebar-collapse");
    });

侧边栏切换不适用于移动设备

0 个答案: