My HTML code is:
<div class="nav-collapse collapse">
<ul class="nav nav-pills ddmenu">
<li class="dropdown "><a href="index.html">Home</a></li>
<li class="dropdown"><a href="about.html">About</a></li>
<li class="dropdown active">
<a href="features.html">Features</a>
<ul class="dropdown-menu">
<li><a href="#" id="drp_pbx">Office</a></li>
<li><a href="#" id="drp_call">Center</a></li>
</ul>
</li>
<li class="dropdown"><a href="apis.html">API</a></li>
<li class="dropdown"><a href="downloads.html">Download</a></li>
<li class="dropdown"><a href="blogs.php">Blog</a></li>
<li class="dropdown"><a href="contact.php">Contact</a></li>
</ul>
I got to drop downs menu under 'features.html' and I wrote JQuery to display drp_pbx
and drp_call
drop content depend on click event
My JQuery is:
$(document).ready(function () {
$("#callcenter_features").hide();
$('#drp_pbx, #drp_call').click(function () {
if (this.id == 'drp_pbx') {
$("#pbx_features").show();
}
else if (this.id == 'drp_call') {
$("#pbx_features").hide();
$("#callcenter_features").show();
}
});
});
If I am at features.html table every thing works as expected, if I tried from some other pages to access drp_pbx
and drp_call
functionalities not working properly, even if I clicked drp_call
it always appear content of drp_pbx
.
I want to display content according to my click event of JQuery.
Try hiding the other menu if the second one is clicked:
$(document).ready(function () {
$("#callcenter_features").hide();
$('#drp_pbx, #drp_call').click(function () {
if (this.id == 'drp_pbx') {
$("#callcenter_features").hide();
$("#pbx_features").show();
}
else if (this.id == 'drp_call') {
$("#pbx_features").hide();
$("#callcenter_features").show();
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.