如何在下拉单击上将<nav>标签内容下移并在<nav>标签内列出列表

时间：2019-05-20 07:55:30

标签： html css bootstrap-4

我正在尝试列出我的drop-down，但工作正常，但是在单击Finance Report链接后，我希望<nav>标签的其余内容向下移动，而drop-down应该<nav>内部打开。请帮忙，谢谢。

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse visible-xs">
  <div class="container-fluid">
    <ul>
      <li class="active"><a href="#">Dashboard</a></li>
      <li><a href="#content1">#</a></li>
      <li><a href="#content2">#</a></li>
      <li><a href="#content3">#</a></li>
      <li><a href="#content4">#</a></li>
      <li> <a href="#content5">#</a></li>
    </ul>
  </div>
</nav>

<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-2 sidenav hidden-xs" id="all">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#" onclick="show('Page1');">Dashboard</a></li>

        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Financial Department Report<span class="caret"></span></a>
          <ul class="dropdown-menu" id="menu">
            <li><a href="#content1" onclick="show('Page2');" ng-click="getOperationReport(); mytable1=true; graph1=true" id="operation">Operational Report </a></li>
            <li><a href="#content2" onclick="show('Page2');" ng-click="getProfitReport(); mytable2=true; graph2=true" id="profit">Profitability Report</a></li>
            <li><a href="#content3" onclick="show('Page2');" ng-click="getWorkingReport(); mytable3=true; graph3=true" id="working">Working Capital</a></li>
            <li><a href="#content4" onclick="show('Page2');" ng-click="getResourceChainReport(); mytable4=true; graph4=true" id="resource">Resource Management and Chain Management</a></li>
            <li><a href="#content5" onclick="show('Page2');" ng-click="getHRReport(); mytable5=true; graph5=true" id="HR">Human Resource Management</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Production Department Report<span class="caret"></span></a>
          <ul class="dropdown-menu" id="menu">
            <li><a href="#content6" onclick="show('Page3')" ng-click="getProductionBatch(); mytable6=true; graph6=true; graph7=true" id="salesforecast">Sales Forecast Report</a></li>
            <li><a href="#content7" onclick="show('Page3')">Batch Produced Report</a></li>
            <li class="nav-link"><a class="m-pub" href="#content8" onclick="show('Page3')">Production Plan Report</a></li>
          </ul>
        </li>
        <li>
          <form action="${pageContext.request.contextPath}/logout" method="post"><button type="submit">Logout</button></form>
        </li>
      </ul>
    </div>
  </div>
</div>

This is how its looking now

2 个答案:

答案 0 :(得分：0)

If i understood u , if u want make side Navbar for Dashboard , use this and change code if u want ...


    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
    }


function myAccFunc() {
  var x = document.getElementById("demoAcc");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    x.previousElementSibling.className += " w3-color";
  } else { 
    x.className = x.className.replace(" w3-show", "");
    x.previousElementSibling.className = 
    x.previousElementSibling.className.replace(" w3-green", "");
  }
}
    body {
      font-family: "Lato", sans-serif;
    }

    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .sidenav a:hover {
      color: #f1f1f1;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    #main {
      transition: margin-left .5s;
      padding: 16px;
    }

    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }

#dropDow{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.w3-green, .w3-hover-color:hover{
    background-color: #fff;
 }
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">






    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <button class="w3-button w3-block w3-left-align" id="dropDow" onclick="myAccFunc()">
      Accordion <i class="fa fa-caret-down"></i>
      </button>
      <div id="demoAcc" class="w3-hide w3-white w3-card">
        <a href="#" class="w3-bar-item w3-button">Link</a>
        <a href="#" class="w3-bar-item w3-button">Link</a>
      </div>
      <a href="#">Contact</a>
    </div>

    <div id="main">
      <h2>Sidenav Push Example</h2>
      <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    </div>

答案 1 :(得分：0)

我认为您需要此实现，不要忘记将Popper.js添加到您的head标签中，Bootstrap需要data-toggle使用它。这是我基于accordion方法的解决方案：

let page1, page2, page3, logout;
let pages;

function show(selection) {
  let page;
  pages.removeClass('hidden');
  pages.addClass('hidden');
  if (selection) {
    page = getPage(selection);
    $(page).removeClass('hidden');
  }
}

function getPage(selection) {
  for (let index = 0; index < pages.length; index++) {
    item = pages[index];
    if (item.id === selection) {
      return item;
    }
  }
}

$(function() {
  console.log('ready!');

  page1 = $('#page1');
  page2 = $('#page2');
  page3 = $('#page3');
  logout = $('#logout');

  pages = $([]).add(page1).add(page2).add(page3).add(logout);
  pages.addClass('hidden');
});
body {
  font-family: "Lato", sans-serif;
}

.hidden {
  display: none;
}

#content {
  height: 100%;
  overflow: auto;
  text-align: center;
  line-height: 300px;
}

.card {
  min-width: 300px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-5 sidenav hidden-xs" id="all">
      <ul id="accordion" class="nav nav-pills nav-stacked">
        <li class="card">
          <div class="card-header" id="headingOne">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" onclick="show('page1');">Dashboard</button>
          </div>
        </li>
        <li class="card">
          <div class="card-header" id="headingTwo">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Financial Department Report<span class="caret"></span></button>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              <ul>
                <li class="nav-link"><a href="#content1" onclick="show('page2');" ng-click="getOperationReport(); mytable1=true; graph1=true" id="operation">Operational Report </a></li>
                <li class="nav-link"><a href="#content2" onclick="show('page2');" ng-click="getProfitReport(); mytable2=true; graph2=true" id="profit">Profitability Report</a></li>
                <li class="nav-link"><a href="#content3" onclick="show('page2');" ng-click="getWorkingReport(); mytable3=true; graph3=true" id="working">Working Capital</a></li>
                <li class="nav-link"><a href="#content4" onclick="show('page2');" ng-click="getResourceChainReport(); mytable4=true; graph4=true" id="resource">Resource Management and Chain Management</a></li>
                <li class="nav-link"><a href="#content5" onclick="show('page2');" ng-click="getHRReport(); mytable5=true; graph5=true" id="HR">Human Resource Management</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="card">
          <div class="card-header" id="headingThree">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Production Department Report<span class="caret"></span></button>
          </div>
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body">
              <ul>
                <li class="nav-link"><a href="#content6" onclick="show('page3')" ng-click="getProductionBatch(); mytable6=true; graph6=true; graph7=true" id="salesforecast">Sales Forecast Report</a></li>
                <li class="nav-link"><a href="#content7" onclick="show('page3')">Batch Produced Report</a></li>
                <li class="nav-link"><a class="m-pub" href="#content8" onclick="show('Page3')">Production Plan Report</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="card">
          <div class="card-header" id="headingOne">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" onclick="show('logout');">Logout</button>
          </div>
        </li>
      </ul>
    </div>

    <div id="content" class="col-sm-7">
      <div id="page1">Page 01</div>
      <div id="page2">Page 02</div>
      <div id="page3">Page 03</div>
      <div id="logout">Logout</div>
    </div>
  </div>
</div>

相关问题
最新问题