Question

我在一个项目中工作，而我的水平菜单栏工作不正常，因为我希望点击它们时我的主菜单会自动关闭。

这是我的代码：

$(document).ready(function() {        
    // sidebar menu click
    $('.templatemo-sidebar-menu li.sub a').click(function(){
        if($(this).parent().hasClass('open')) {
            $(this).parent().removeClass('open');
        } else {
            $(this).parent().addClass('open');
        }
    });  // sidebar menu click
}); // document.ready

Answer 1

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Admin_Master_MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
  <title>Admin</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width">        
  <link rel="stylesheet" href="../css/templatemo_main.css">
   <link href="../MsgboxJs/myMessage.css" rel="stylesheet" type="text/css" />
    <script src="../MsgboxJs/MsgboxJQuery.js" type="text/javascript"></script>
     <link href="../TableCss.css" rel="stylesheet" type="text/css" />
  <!-- Messagebox FadeIn FadeOut -->
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#messageBox").addClass("messagebox"); setTimeout(function () {
                $("#messageBox").fadeOut("slow")
            }, 3000);
        });
        function successmessagebox(nmsg) {
            $("#messageBox").removeClass().addClass("success").html(nmsg).fadeIn(2000).fadeOut(4000);
        }
        function informationbox(wmsg) {
            $("#messageBox").removeClass().addClass("warning").html(wmsg).fadeIn(2000).fadeOut(4000);
        }
        function errormsgbox(emsg) {
            $("#messageBox").removeClass().addClass("error").html(emsg).fadeIn(2000).fadeOut(4000);
        }
        function validationmsgbox(emsg) {
            $("#messageBox").removeClass().addClass("validation").html(emsg).fadeIn(2000).fadeOut(4000);
        }
    </script>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body  onload="startTime();" >
    <form id="form1" runat="server" runat="server" autocomplete="off">
    <div>

    <div class="navbar navbar-inverse" role="navigation">






      <div class="navbar-header">

        <div class="logo" ><h1> Admin-OurTenders</h1>




        </div>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> 
      </div>   
    </div>
    <div class="template-page-wrapper">

      <div class="navbar-collapse collapse templatemo-sidebar">
        <ul class="templatemo-sidebar-menu">

          <li class="active"><a href="#"><i class="fa fa-home"></i>Dashboard</a></li>
          <li class="sub open">
            <a href="javascript:;">
              <i  class="fa fa-cog"></i> Master Menu <div class="pull-right"><span class="caret"></span></div>
            </a>

            <ul class="templatemo-submenu">

              <li><a href="Activities.aspx">Add Activities</a></li>
              <li><a href="City.aspx">Add City</a></li>
              <li><a href="Region.aspx">Add Region</a></li>             
              <li><a href="Issuer.aspx">Add Issuer</a></li>

            </ul>

          </li>
          <li class="sub open">
            <a href="javascript:;">
              <i class="fa fa-database"></i> Tender <div class="pull-right"><span class="caret"></span></div>
            </a>
            <ul class="templatemo-submenu">
              <li><a href="../Tender/reg.aspx">New Tender</a></li>
              <li><a href="../Tender/Tender.aspx">Latest Tender</a></li>
              <li><a  href="../Tender/CorrigendumTender.aspx">Corrigendums Tender</a></li>             

            </ul>
          </li>
         <li class="sub open">
            <a href="javascript:;">
              <i class="fa fa-users"></i> Manage Users <div class="pull-right"><span class="caret"></span></div>
            </a>
            <ul class="templatemo-submenu">
              <li><a href="../User/reg.aspx">New User</a></li>
              <li><a href="../User/ActivationUser.aspx">Active Account Request</a></li>
              <li><a  href="../User/Useractive.aspx">User Account</a></li>             

            </ul>
          </li>

          <li><a href="#" data-toggle="modal" data-target="#confirmModal"><i class="fa fa-sign-out"></i>Sign Out</a></li>
        </ul>
      </div><!--/.navbar-collapse -->

     <div class="templatemo-content" style="background-color:#F0EBE6">
      <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>


     </div>
     <!-----------------------FOOTER START HERE ----------------------------------->   
      <footer class="templatemo-footer">
        <div class="templatemo-copyright">
          <p>Copyright &copy; 2015 OurTender</p>
        </div>
      </footer>
    </div>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/Chart.min.js"></script>
    <script src="../js/templatemo_script.js"></script>
    <script type="text/javascript">
        // Line chart
        var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
        var lineChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
      {
          label: "My First dataset",
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      },
      {
          label: "My Second dataset",
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      }
      ]

        }

        window.onload = function () {
            var ctx_line = document.getElementById("templatemo-line-chart").getContext("2d");
            window.myLine = new Chart(ctx_line).Line(lineChartData, {
                responsive: true
            });
        };

        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

        $('#loading-example-btn').click(function () {
            var btn = $(this);
            btn.button('loading');
            // $.ajax(...).always(function () {
            //   btn.button('reset');
            // });
        });
  </script>

    </div>
    </form>
</body>
</html>

jquery自动关闭主菜单

1 个答案: