jqueryで作業している垂直メニューがあります。HTML と Jquery は以下のとおりです。
HTML:
<div id="menu">
<ul class="navmenu">
<li>
<div class="menutop menusingle">
<a id="A1" runat="server" href="~/View.aspx?pg=aboutus" >About Us </a></div>
</li>
<li>
<div class="menutop">
<a href="#">Courses</a><div class="toggle">
+</div>
</div>
<ul class="submenu">
<li><a id="A6" runat="server" href="~/View.aspx?pg=SoftwareIT">Software /IT</a></li>
<li><a id="A7" runat="server" href="~/View.aspx?pg=Telecommunication">Telecommunication</a></li>
<li><a id="A8" runat="server" href="~/View.aspx?pg=Hardware">Hardware & Networking</a></li>
<li><a id="A9" runat="server" href="~/View.aspx?pg=Sales">Sales & Marketing</a></li>
<li><a id="A10" runat="server" href="~/View.aspx?pg=BPO">BPO & Soft Skills</a></li>
</ul>
</li>
<li>
<div class="menutop">
<a href="#">Services</a><div class="toggle">
+</div>
</div>
<ul class="submenu">
<li><a id="A2" runat="server" href="~/View.aspx?pg=IndividualTraining">Individual Training </a></li>
<li><a id="A3" runat="server" href="~/View.aspx?pg=OncampusTraining ">On Campus Training </a></li>
<li><a id="A4" runat="server" href="~/View.aspx?pg=CorporateTraining">Corporate Training </a></li>
<li><a id="A5" runat="server" href="~/View.aspx?pg=Placement">Placement </a></li>
</ul>
</li>
<li>
<div class="menutop">
<a href="#">Trainings</a><div class="toggle">
+</div>
</div>
<ul class="submenu">
<li><a id="A11" runat="server" href="~/View.aspx?pg=FastTrack">FastTrack Training</a></li>
<li><a id="A12" runat="server" href="~/View.aspx?pg=Summer">Summer/Industrial</a></li>
<li><a id="A13" runat="server" href="~/View.aspx?pg=Weekend">Weekend Training</a></li>
</ul>
</li>
</ul>
</div>
+ 記号をクリックすると、サブメニューの引き出しが開きます。これは手動で非常に優れています。今、私は要求に応じてそれを自動化したい. トレーニング、コース、およびサービスにトグルがあるため、現在の URL がサービスの場合、サービス メニューが自動的に開きます。トップナビゲーションとフッターナビゲーションもあります。上記は左ナビゲーションです。
同じためのJquery:
<script type="text/javascript">
$(document).ready(function() {
$('.toggle:not(.toggle-open)').addClass('toggle-closed').parents('li').children('ul').hide();
if ($.browser.msie) {
$('#menu ul.navmenu li:last-child .menutop').css('border-bottom', '1px solid #CCC');
}
$('.toggle').click(function() {
if ($(this).hasClass('toggle-open')) {
$(this).removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
$(this).parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
} else {
$(this).parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
$(this).removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
});
})
</script>
$('.toggle').click(function()
そのため、クエリ文字列に基づいて from cs を呼び出す方法が必要 です。