Javascript HTML中的收缩侧菜单
我正在创建一个HTML页面，其中添加了切换侧菜单。当我点击图中所示的4条垂直线时，折叠侧菜单，并在点击该线时展开。 我想更改此功能。我希望在点击该行时，侧菜单应该缩小，并且只显示4条垂直线，然后再次点击它应该展开 到目前为止，我已经完成了添加代码的工作 CSS代码：Javascript HTML中的收缩侧菜单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在创建一个HTML页面，其中添加了切换侧菜单。当我点击图中所示的4条垂直线时，折叠侧菜单，并在点击该线时展开。 我想更改此功能。我希望在点击该行时，侧菜单应该缩小，并且只显示4条垂直线，然后再次点击它应该展开 到目前为止，我已经完成了添加代码的工作 CSS代码： nav.sidebar-menu-expanded { width: auto; } nav.sidebar { position: fixed; top: 0px;
nav.sidebar-menu-expanded {
width: auto;
}
nav.sidebar {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background: none repeat scroll 0 0 #0099ff;
color: white;
padding: 20px 10px;
}
nav.sidebar ul.level1 li a.expandable {
outline: 0;
display: block;
position: relative;
width: 100%;
height: 30px;
color: white;
text-decoration: none;
text-align: left;
padding: 4px 4px 4px 0px;
font-size: 20px;
}
.tab-border{
border : 1px solid black;
border-collapse:collapse;
border-spacing : 0;
}
function SideBAR() {}
SideBAR.prototype.expandMyMenu = function () {
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
SideBAR.prototype.collapseMyMenu = function () {
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
SideBAR.prototype.showMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").show();
};
SideBAR.prototype.hideMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").hide();
};
SideBAR.prototype.showActiveSubMenu = function () {
$("li.active").show();
//$("li.active ul.level2").show();
return $("li.active a.expandable").css({
width: "100%"
});
};
SideBAR.prototype.hideActiveSubMenu = function () {
return $("li.active ul.level2").hide();
};
SideBAR.prototype.adjustPaddingOnExpand = function () {
$("ul.level1 li a.expandable").css({
padding: "1px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "1px 4px 4px 4px"
});
};
SideBAR.prototype.resetOriginalPaddingOnCollapse = function () {
$("ul.nbs-level1 li a.expandable").css({
padding: "4px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "4px"
});
<nav class='sidebar sidebar-menu-collapsed left-off-canvas-menu'>
<a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-align-justify glyphicon glyphicon-plus'></span>
</a>
<ul class='level1 side-ul'>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>AGM</span>
</a>
<ul class='level2'>
<li><a href="#AGM1"><span>5INV (Statement of unclaimed and unpaid amounts)</span></a></li>
<li><a href="#AGM2"><span>Annual Evaluation of Board and Committee Performance</span></a></li>
<li><a href="#AGM3"><span>AOC 1(Financials)(Subsidiaries)</span></a></li>
<li><a href="#AGM4"><span>AOC 2 (Disclosure with related parties)</span></a></li>
<li><a href="#AGM5"><span>AOC 3 (Abridged)</span></a></li>
<li><a href="#AGM6"><span>AOC 4 (Financials)</span></a></li>
<li><a href="#AGM7"><span>AOC 4 (Financials) (OPC)</span></a></li>
<li><a href="#AGM8"><span>Board Report</span></a></li>
<li><a href="#AGM9"><span>Board Report (Disclosure about adequacy of Financial Controls)</span></a></li>
<li><a href="#AGM10"><span>Board Report (OPC)</span></a></li>
<li><a href="#AGM11"><span>MGT 15 (Report of AGM)</span></a></li>
<li><a href="#AGM12"><span>MR 3 (Secretarial Audit)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Alteration of AOA</span>
</a>
<ul class='level2'>
<li><a href="#Alteration of AOA"><span>INC 27 (Conversion)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Alteration of MOA</span>
</a>
<ul class='level2'>
<li><a href="#Alteration of MOA1"><span>INC 24 (Change of Name)</span></a></li>
<li><a href="#Alteration of MOA2"><span>INC 25 (Certificate)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Annual Return</span>
</a>
<ul class='level2'>
<li><a href="#Annual Return1"><span>MGT 7 (Annual Return)</span></a></li>
<li><a href="#Annual Return2"><span>MGT 8 (PCS Certificate)</span></a></li>
<li><a href="#Annual Return3"><span>MGT 9 (Extract)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Auditor</span>
</a>
<ul class='level2'>
<li><a href="#Auditor1"><span>ADT 1 (Appointment)- First Auditor</span></a></li>
<li><a href="#Auditor2"><span>ADT 1 (Appointment)- Subsequent Auditor</span></a></li>
<li><a href="#Auditor3"><span>ADT 2 (Removal)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Books of accounts</span>
</a>
<ul class='level2'>
<li><a href="#Books of accounts"><span>AOC 5 (Books of Accounts Kept)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Buy back</span>
</a>
<ul class='level2'>
<li><a href="#Buy back1"><span>SH 11 (Return for buy back) (Listed Companies)</span></a></li>
<li><a href="#Buy back2"><span>SH 11 (Return for buy back) (Other than Listed Companies)</span></a></li>
<li><a href="#Buy back3"><span>SH 8 (Letter of Offer for Buy Back of securities)</span></a></li>
<li><a href="#Buy back4"><span>SH 9 (Declaration of Solvency for buy back of securities for other than Listed Companies)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Charges</span>
</a>
<ul class='level2'>
<li><a href="#Charges1"><span>CHG 1 (Creation/ Modification)</span></a></li>
<li><a href="#Charges2"><span>CHG 2 (Certificate of Registration)</span></a></li>
<li><a href="#Charges3"><span>CHG 3 (Certificate of Modification)</span></a></li>
<li><a href="#Charges4"><span>CHG 4 (Satisfaction)</span></a></li>
<li><a href="#Charges5"><span>CHG 5 (ROC certificate for Satisfaction)</span></a></li>
<li><a href="#Charges6"><span>CHG 6 (Receiver / Manager)</span></a></li>
<li><a href="#Charges7"><span>CHG 7 (Register of Charges)</span></a></li>
<li><a href="#Charges8"><span>CHG 8 (Application to Central Government for condonation of delay)</span></a></li>
<li><a href="#Charges9"><span>CHG 9 (Debentures)</span></a></li>
<li><a href="#Charges10"><span>INC 28 (Filing Central Government Order)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Cost Audit</span>
</a>
<ul class='level2'>
<li><a href="#Cost Audit"><span>CRA-2 (Appointment)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Debentures</span>
</a>
<ul class='level2'>
<li><a href="#Debentures"><span>SH 12 (Debenture Trust Deed)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Debentures Register</span>
</a>
<ul class='level2'>
<li><a href="#Debentures Register"><span>MGT 2 (Debenture and Other Security Holders Register)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Deposits</span>
</a>
<ul class='level2'>
<li><a href="#Deposits1"><span>DPT 1 (Advertisement - Members)</span></a></li>
<li><a href="#Deposits2"><span>DPT 1 (Advertisement - Public)</span></a></li>
<li><a href="#Deposits3"><span>DPT 2 (Deposit Trust Deed)</span></a></li>
<li><a href="#Deposits4"><span>DPT 3 (Annual Return)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Director</span>
</a>
<ul class='level2'>
<li><a href="#Director1"><span>DIR 10 (Removal of Disqualifications)</span></a></li>
<li><a href="#Director2"><span>DIR 12 (Appointment/Modification)</span></a></li>
<li><a href="#Director3"><span>DIR 12 (First Directors)</span></a></li>
<li><a href="#Director4"><span>DIR 2 (Consent)</span></a></li>
<li><a href="#Director5"><span>DIR 9 (Report to MCA) (Disqualifications)</span></a></li>
<li><a href="#Director6"><span>MBP 1 (Notice of Interest)</span></a></li>
<li><a href="#Director7"><span>MBP 1 (Notice of Interest)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Dormant Company</span>
</a>
<ul class='level2'>
<li><a href="#Dormant Company1"><span>MSC 1 (Application for Dormant Company)</span></a></li>
<li><a href="#Dormant Company2"><span>MSC 3 (Return of Dormant companies)</span></a></li>
<li><a href="#Dormant Company3"><span>MSC 4 (Active status)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>General Meeting</span>
</a>
<ul class='level2'>
<li><a href="#General Meeting1"><span>MGT 11 (Proxy)</span></a></li>
<li><a href="#General Meeting2"><span>MGT 12 (Polling Paper)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Incorporation</span>
</a>
<ul class='level2'>
<li><a href="#Incorporation1"><span>INC 1 (Name Approval)</span></a></li>
<li><a href="#Incorporation2"><span>INC 10 (Verification of signature)</span></a></li>
<li><a href="#Incorporation3"><span>INC 11 (Certificate of Incorporation) issued by ROC</span></a></li>
<li><a href="#Incorporation4"><span>INC 2 (Application for Incorporation) (OPC)</span></a></li>
<li><a href="#Incorporation5"><span>INC 21 (commencement of business)</span></a></li>
<li><a href="#Incorporation6"><span>INC 22 (Incorporation)</span></a></li>
<li><a href="#Incorporation7"><span>INC 3 (Nominee Consent Form - Change in nominee or sole member) (OPC)</span></a></li>
<li><a href="#Incorporation8"><span>INC 3 (Nominee Consent Form) (OPC)</span></a></li>
<li><a href="#Incorporation9"><span>INC 4 (Change in member / nominee)</span></a></li>
<li><a href="#Incorporation10"><span>INC 5 (Exceeding threshold) (OPC)</span></a></li>
<li><a href="#Incorporation11"><span>INC 6 (Conversion Private to OPC)</span></a></li>
<li><a href="#Incorporation12"><span>INC 6 (Conversion) (OPC to Private / Public)</span></a></li>
<li><a href="#Incorporation13"><span>INC 7 (Application)</span></a></li>
<li><a href="#Incorporation14"><span>INC 8 (Declaration)</span></a></li>
<li><a href="#Incorporation15"><span>INC 9 (Affidavit)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Issue of Capital</span>
</a>
<ul class='level2'>
<li><a href="#Issue of Capital1"><span>PAS 1 (Advertisement) (At time of proposed variation in Prospectus)</span></a></li>
<li><a href="#Issue of Capital2"><span>PAS 2 (Shelf Prospectus and Information Memorandum)</span></a></li>
<li><a href="#Issue of Capital3"><span>PAS 3 (Return of Allotment)</span></a></li>
<li><a href="#Issue of Capital4"><span>PAS 4 (Private Placement Offer)</span></a></li>
<li><a href="#Issue of Capital5"><span>PAS 5 (Private Placement Record)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>KMP</span>
</a>
<ul class='level2'>
<li><a href="#KMP1"><span>MR 1 (Appointment of Company Secretary)</span></a></li>
<li><a href="#KMP2"><span>MR 1 (Appointment of KMP except Company Secretary)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Loans & Investments</span>
</a>
<ul class='level2'>
<li><a href="#Loans & Investments1"><span>MBP 2 (Register under Section 186)</span></a></li>
<li><a href="#Loans & Investments2"><span>MBP 3 (Investment not held in own name)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Managerial Remuneration</span>
</a>
<ul class='level2'>
<li><a href="#Managerial Remuneration"><span>MR 2 (Application to Central Government)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>MCA General Forms</span>
</a>
<ul class='level2'>
<li><a href="#MCA General Forms1"><span>ADJ (Memorandum of Appeal)</span></a></li>
<li><a href="#MCA General Forms2"><span>CG1 (Application)</span></a></li>
<li><a href="#MCA General Forms3"><span>GNL 1 (Filing Application)</span></a></li>
<li><a href="#MCA General Forms4"><span>GNL 2 (Submission of Documents)</span></a></li>
<li><a href="#MCA General Forms5"><span>GNL 4 (Rectification of Defects)</span></a></li>
<li><a href="#MCA General Forms6"><span>RD1 (Application for INC-12, removal of auditor, rectification of name others)</span></a></li>
<li><a href="#MCA General Forms7"><span>RD2 (Application to Regional Director relating to Charges)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Members Register</span>
</a>
<ul class='level2'>
<li><a href="#Members Register1"><span>MGT 1 (Members Register)</span></a></li>
<li><a href="#Members Register2"><span>MGT 3 (Details/ Changes in Location of Foreign Register)</span></a></li>
<li><a href="#Members Register3"><span>MGT 6 (Intimation for receipt of Declaration)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Office who is in default</span>
</a>
<ul class='level2'>
<li><a href="#Office who is in default"><span>GNL3 (Director/KMP charged)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Registered Office</span>
</a>
<ul class='level2'>
<li><a href="#Registered Office1"><span>INC 22 (Change within state and same ROC)</span></a></li>
<li><a href="#Registered Office2"><span>INC 23 (Change outside state and same state but different ROC)</span></a></li>
<li><a href="#Registered Office3"><span>INC 26 (Advertisement)</span></a></li>
<li><a href="#Registered Office4"><span>INC 28 (Order of Central Government)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Related Parties</span>
</a>
<ul class='level2'>
<li><a href="#Related Parties"><span>MBP 4 (Contracts with Related party)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Resolutions</span>
</a>
<ul class='level2'>
<li><a href="#Resolutions1"><span>MGT 14 (Board resolution)</span></a></li>
<li><a href="#Resolutions2"><span>MGT 14 (Shareholder resolution)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Scrutinizer</span>
</a>
<ul class='level2'>
<li><a href="#Scrutinizer"><span>MGT 13 (Scrutinizer Report)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Section 8</span>
</a>
<ul class='level2'>
<li><a href="#Section 8"><span>INC 26 (Advertisement)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Share capital</span>
</a>
<ul class='level2'>
<li><a href="#Share capital1"><span>SH 1 (Issue of Duplicate Share Certificate)</span></a></li>
<li><a href="#Share capital2"><span>SH 1 (Issue of Duplicate Share Certificate)</span></a></li>
<li><a href="#Share capital3"><span>SH 1 (Share Certificate)</span></a></li>
<li><a href="#Share capital4"><span>SH 1 (Logging of Share Certificate for transfer or transmission of share)</span></a></li>
<li><a href="#Share capital5"><span>SH 10 (Register)</span></a></li>
<li><a href="#Share capital6"><span>SH 13 (Nomination)</span></a></li>
<li><a href="#Share capital7"><span>SH 14 (Cancellation or Variation of Nomination)</span></a></li>
<li><a href="#Share capital8"><span>SH 15 (Certificate of Compliance)</span></a></li>
<li><a href="#Share capital9"><span>SH 2 (Renewed and Duplicate Share Certificates)</span></a></li>
<li><a href="#Share capital10"><span>SH 3 (Register of Sweat Equity Shares)</span></a></li>
<li><a href="#Share capital11"><span>SH 5 (Notice for transfer of partly paid securities</span></a></li>
<li><a href="#Share capital12"><span>SH 6 (Employee Stock Options)</span></a></li>
<li><a href="#Share capital13"><span>SH7 (Increase of Share Capital)</span></a></li>
<li><a href="#Share capital14"><span>SH7 (Order by Government for increase of share capital)</span></a></li>
<li><a href="#Share capital15"><span>SH7 (Redemption of preference shares)</span></a></li>
</ul>
</li>
<li class='active'>
<a class='expandable'>
<span class='glyphicon glyphicon-plus level1-icon'></span>
<span class='expanded-element'>Shareholding Details</span>
</a>
<ul class='level2'>
<li><a href="#Shareholding Details"><span>MGT 10 (Promoters/ Top 10 Shareholders)</span></a></li>
</ul>
</li>
</ul>
</nav>
-
如果您在一个文档中提供HTML、css和js，那么就容易多了。如果不提供HTML，我们应该如何测试您的代码？我想了解如何调用函数
侧栏