使用jquery访问下拉菜单

时间:2016-05-14 23:29:30

标签: javascript jquery html5 css3 twitter-bootstrap-3

我的HTML代码是:

<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>

我在'features.html'下面的下拉菜单,我写了JQuery来显示drp_pbxdrp_call删除内容取决于点击事件

我的JQuery是:

$(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();
        }
    });
});

如果我在features.html表格,那么即使我点击了{{1},如果我尝试从其他一些页面访问drp_pbxdrp_call功能不正常它始终显示为drp_call的内容。

我想根据我的点击事件JQuery显示内容。

1 个答案:

答案 0 :(得分:0)

如果单击第二个菜单,请尝试隐藏其他菜单:

$(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();
    }
  });
});