Question

我使用的是metismenu，但不是用于链接，而只是用于表单选择。两个菜单＆＃34;试用＆＃34;和＆＃34;键入＆＃34;是独立的，所以我应该能够在一个菜单中保留选择，同时从另一个菜单中选择项目。例如，我想＆＃34;事件＆gt;内皮＆＃34;和＆＃34;类型＆gt;样品＆＃34;两者都要突出显示。

＆＃13;

$(function() {
  $('#assay').metisMenu(
    {preventDefault: true}
    );
  $('#tubetype').metisMenu(
     {preventDefault: true}
    );
});

＆＃13;

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.min.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
  
.sidebar-nav {
    background: #212529;
}
.sidebar-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: #343a40;
}

.sidebar-nav .metismenu {
    background: #212529;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sidebar-nav .metismenu li + li {
  margin-top: 5px;
}

.sidebar-nav .metismenu li:first-child {
  margin-top: 5px;
}
.sidebar-nav .metismenu li:last-child {
  margin-bottom: 5px;
}

.sidebar-nav .metismenu > li {
/*    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}
.sidebar-nav .metismenu a {
    position: relative;
    display: block;
    padding: 13px 15px;
    color: #adb5bd;
    outline-width: 0;
    transition: all .3s ease-out;
}

.sidebar-nav .metismenu ul a {
    padding: 10px 15px 10px 30px;
}

.sidebar-nav .metismenu ul ul a {
    padding: 10px 15px 10px 45px;
}

.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active {
    color: #f8f9fa;
    text-decoration: none;
    background: #0b7285;
}


.sidebar-nav h3  {
    position: relative;
    display: block;
    padding: 13px 15px;
    color: #adb5bd;
    outline-width: 0;
    transition: all .3s ease-out;
    margin-top: 5px;
    margin-bottom: 5px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.min.js"></script>

<div class="container">
    <div class="row">
      <div class="col-md-3">
        <nav class="sidebar-nav">
          <h3>Select a Trial and Assay</h3>
          <ul class="metismenu" id="assay">
            <li>
              <a class="has-arrow" href="#" aria-expanded="false">Events</a>
              <ul aria-expanded="false" class="collapse">
                <li><a href="#">EV</a></li>
                <li><a href="#">Endothelial</a></li>
                <li><a href="#">Count</a></li>
                <li><a href="#">T-cell</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="#" aria-expanded="false">LVAD</a>
              <ul aria-expanded="false" class="collapse">
                <li><a href="#">EV</a></li>
              </ul>
            </li>
          </ul>
          <h3>Select tube class</h3>
          <ul class="metismenu" id="tubetype">
            <li>
              <a class="has-arrow" href="#" aria-expanded="false">Type</a>
              <ul aria-expanded="false" class="collapse">
                <li><a href="#">Compensation control</a></li>
                <li><a href="#">Negative control</a></li>
                <li><a href="#">Sample</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
      </div>

＆＃13;

Answer 1

而不是使用metismenu，我编写了自己的代码来处理仅使用bootstrap的自动崩溃。

<强> JS

$(document).ready(function () {
    $("#sidebarMenu a").click(function (event) {
        showHideNavItem(this.dataset.target);
    });
});
function showHideNavItem(navId) {
    if (navId !== null) {
        var currentActiveNavId = navId;
        var listNav = $("#sidebarMenu li > a");
        for (var i = 0; i < listNav.length; i++) {
            if (listNav[i].dataset.target !== undefined && listNav[i].dataset.target !== currentActiveNavId) {
                var collapseId = listNav[i].dataset.target;
                $(collapseId).collapse("hide");
            }
        }
    }
};

<强> HTML

<ul id="sidebarMenu" class="nav navbar-nav side-nav">
   <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#demo1">Dropdown 1</a>
      <ul id="demo1" class="collapse">
         <li>
            <a href="#">Dropdown Item 1-1</a>
         </li>
         <li>
            <a href="#">Dropdown Item 1-2</a>
         </li>
      </ul>
   </li>
   <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#demo2">Dropdown 2</a>
      <ul id="demo2" class="collapse">
         <li>
            <a href="#">Dropdown Item 2-1</a>
         </li>
         <li>
            <a href="#">Dropdown Item 2-2</a>
         </li>
      </ul>
   </li>
   <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#demo3">Dropdown 3</a>
      <ul id="demo3" class="collapse">
         <li>
            <a href="#">Dropdown Item 3-1</a>
         </li>
         <li>
            <a href="#">Dropdown Item 3-2</a>
         </li>
      </ul>
   </li>
</ul>

当选择另一个metismenu时，如何保持一个metismenu选择处于活动状态？

1 个答案: