如何在Main-Header类中添加下拉菜单(它不起作用)

<header class="main-header">
<a href="/rm" class="logo"><b>Resource</b> Monitor</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
    </a>
    <ul class="nav navbar-nav">
        <li><a data-toggle="tab" href="#tab_home">Home <span class="sr-only">(current)</span></a></li>
        <li><a data-toggle="tab" href="#tab_pcinfo">?? PC ????</a></li>
        <li><a data-toggle="tab" href="#tab_sysuse">??? ???</a></li>
        <li><a data-toggle="tab" href="#tab_procuse">???? ???</a></li>
        <li><a data-toggle="tab" href="#tab_prodet">???? ????</a></li>
        <li><a data-toggle="tab" href="#tab_sdwt">SDWT ????</a></li>
        <li><a data-toggle="tab" href="#tab_pcevents">??? ?? ??</a></li>
        <li><a data-toggle="tab" href="#tab_winevents">??? ?? ID? ??</a></li>
        <li><a data-toggle="tab" href="#tab_agentinfo">Agent ????</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Email ?? ?? <span
                    class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a data-toggle="tab" href="#tab_emailconfigs">??? ??</a></li>
                <li><a data-toggle="tab" href="#tab_emailreceiver">??? ??</a></li>
            </ul>
        </li>
    </ul>
</nav>

我在主持人类中添加了下拉菜单。但现在正在显示..

 <script type="text/javascript">
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown;
    });
</script>

我也添加了上面的代码。但它仍然没有显示我不知道为什么，..请帮助我

首先，您不需要任何JavaScript才能工作。属性data-toggle ="下拉"为您提供。

我刚刚在您的代码中添加了bootstrap，对我来说很好：

<head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

相关内容

最新更新

热门标签：