I have a vertical menu which is working on jquery. HTML and Jquery is below:
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>
On clicking the + sign it open a drawer for submenu. Which is manually very fine. Now I want to automate it according to request. We have toggle in Training, Courses and Services, so if the current url is of services then the services menu will get opened, automatically. As we have a top navigation and footer navigation also. The above is a left navigation.
Jquery for the same:
<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>
So I need a way to invoke the $('.toggle').click(function() from cs, on the basis of the query string.
Get query string value from key . and Based on your condition it will invoke click.
I assume your js code is inline.