javascript - 点击后实现导航下拉菜单不关闭

Question

我正在使用 materialize css，在导航栏上我有一个下拉菜单，当鼠标悬停在图标上时会打开更多垂直(在右侧的示例中)。

当我单击下拉列表中的链接时，目标会正确触发，但下拉列表不会关闭。

工作 example here .我希望下拉菜单在单击后自动关闭。在我的 html 代码下面:

<ul id="dropdown1" class="dropdown-content collection">
  <li><a href="#/" onclick="openGFS(event, '1', '1'); return false;" id="defaultOpenGFS">Item 1</a></li>
  <li><a href="#/" onclick="openGFS(event, '2', '2'); return false;" id="defaultOpenGFS">Item 2</a></li>
</ul>

<nav  class="blue darken-3">
  <div class="nav-wrapper">
    <ul id="tabs" class="left">
      <li><a href="#" onclick="openGFS(event, '1', '1'); return false;" id="defaultOpenGFS" class="yellow-text text-accent-3"><b>Item 1</b></a></li>
      <li><a href="#" onclick="openGFS(event, '2', '2'); return false;" class="yellow-text text-accent-3"><b>Item 2</b></a></li>
   </ul>
   <ul class="right">     
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1"><i class="material-icons tiny">more_vert</i></a></li>
   </ul>
  </div>
</nav>

<div id="1" class="tabcontent_gfs">
content 1 here
</div>
<div id="2" class="tabcontent_gfs">
content 2 here
</div>

这里是javascript

(function($) {
                $(function() {
$('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      hover: true, // Activate on hover
      belowOrigin: true, // Displays dropdown below the button
      alignment: 'right' // Displays dropdown with edge aligned to the left of button
    }
  );
                }); // End Document Ready
})(jQuery); // End of jQuery name space

var currentTabGFS = null;
function openGFS(evt, tabName, ThirdValue) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent_gfs");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
    var text = document.getElementById(tabName);
    text.innerHTML = text.innerHTML.replace('{var}',tabName);
    currentTabGFS = tabName;
}

document.getElementById("defaultOpenGFS").click();

function dismissGFS(){
    document.getElementById(currentTabGFS).style.display='none';
};

和部分CSS:

<style class="cp-pen-styles">
.dropdown-content {
  background-color: #FFFFFF;
  margin: 0;
  display: none;
  min-width: 350px;
  height: 120px;
  max-height: auto;
  margin-left: -1px; 
  overflow: auto;
  opacity: 0;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  will-change: width, height;
}
</style>

Answer 1

根据 the materialize dropdown docs ，您可以在这些链接的点击处理程序中使用 $('.dropdown-button').dropdown('close');，但是您需要升级 materialize，因为您当前的版本不支持

(function($) {
  $(function() {
    $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      hover: true, // Activate on hover
      belowOrigin: true, // Displays dropdown below the button
      alignment: 'right' // Displays dropdown with edge aligned to the left of button
    });
  }); // End Document Ready
})(jQuery); // End of jQuery name space

var currentTabGFS = null;

function openGFS(evt, tabName, ThirdValue) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent_gfs");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
  var text = document.getElementById(tabName);
  text.innerHTML = text.innerHTML.replace('{var}', tabName);
  currentTabGFS = tabName;
  $('.dropdown-button').dropdown('close');
}

document.getElementById("defaultOpenGFS").click();

function dismissGFS() {
  document.getElementById(currentTabGFS).style.display = 'none';
};

body {
  font-family: "Lato", sans-serif;
}


/* Style the tab */

div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

div.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

div.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

div.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 0px 0px;
  border: 0px solid #ccc;
  border-top: none;
}


/* Style the close button */

.topright {
  float: right;
  cursor: pointer;
  font-size: 20px;
}

.topright:hover {
  color: red;
}

nav .nav-wrapper i.material-icons {
  height: 48px;
  line-height: 48px;
}

nav ul a {
  font-size: 2.1rem;
  color: #FFF;
}

nav,
nav .nav-wrapper i,
nav a.button-collapse,
nav a.button-collapse i {
  height: 75px;
  line-height: 75px;
}

</style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> <style class="cp-pen-styles"> .dropdown-content {
  background-color: #FFFFFF;
  margin: 0;
  display: none;
  min-width: 350px;
  height: 120px;
  max-height: auto;
  margin-left: -1px;
  /* Add this to keep dropdown in line with edge of navbar */
  /*  overflow: hidden;*/
  /* Changed this from overflow-y:auto; to overflow:hidden; */
  overflow: auto;
  opacity: 0;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  will-change: width, height;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<ul id="dropdown1" class="dropdown-content collection">
  <li><a href="#/" onclick="openGFS(event, '1', '1'); return false;" id="defaultOpenGFS">Item 1</a>
    <label>
      <input type="checkbox"><span class="lever"></span></label>
  </li>
  <li><a href="#/" onclick="openGFS(event, '2', '2'); return false;" id="defaultOpenGFS">Item 2</a>
    <label>
      <input type="checkbox"><span class="lever"></span></label>
  </li>
</ul>

<nav class="blue darken-3">
  <div class="nav-wrapper">
    <ul id="tabs" class="left">
      <li><a href="#" onclick="openGFS(event, '1', '1'); return false;" id="defaultOpenGFS" class="yellow-text text-accent-3"><b>Item 1</b></a></li>
      <li><a href="#" onclick="openGFS(event, '2', '2'); return false;" class="yellow-text text-accent-3"><b>Item 2</b></a></li>
    </ul>
    <ul class="right">
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1"><i class="material-icons tiny">more_vert</i></a></li>
    </ul>
  </div>
</nav>


<div id="1" class="tabcontent_gfs">
  content 1 here
</div>
<div id="2" class="tabcontent_gfs">
  content 2 here
</div>