Horizontal Toggle Dropdown

问题

I'm trying to create a horizontal dropdown (err.. dropside?).

When clicked, it expands to the right to show more options, and the user can click the option they want.

I have found this JsFiddle but it is implemented using ul and li, not select and option. Does this really matter for the purposes of clicking a menu item and dispatching an action? It also expands on hover, not on click. And when a menu item is clicked, I need the menu to stay open until the 'X' on the left is clicked. If anyone could help me start on this it would be much appreciated.

Here's an image of what I'm trying to do

回答1:

Try something like this:

[...document.getElementsByClassName("item")].forEach(i => i.addEventListener("click", function(e) {
  e.stopPropagation();
  console.log(this);
}));

document.getElementById("open-button").addEventListener("click", function() {
  this.parentElement.classList.add("open");
});

document.getElementById("close-button").addEventListener("click", function() {
  this.parentElement.classList.remove("open");
});

body {
  background: black;
}
.menu {
  background: white;
  border-radius: 17px;
  height: 34px;
  width: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.menu .item {
  display: none;
  color: grey;
}
.menu #open-button {
  display: block;
}
.menu #close-button {
  display: none;
  color: grey;
}

.menu.open {
  justify-content: space-around;
  width: 300px;
}
.menu.open .item {
  display: block;
}
.menu.open .item:hover {
  color: black;
}
.menu.open #close-button {
  display: block;
}
.menu.open #close-button:hover {
  color: black;
}
.menu.open #open-button {
  display: none;
}

<div class="menu">
  <div id="open-button">Menu</div>
  <div id="close-button">&#10005;</div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
<div>

回答2:

if you for some reason have to use select and option in your markup here's how to do it, but it's a lot of work https://www.w3schools.com/howto/howto_custom_select.asp

or you can do something like this:

var btnToggle = document.querySelector(".js-toggle");

btnToggle.addEventListener("click", handleMenu);

function handleMenu() {
  var menu = document.querySelector(".js-menu");
  if ( menu.classList.contains("is-showing") )
  {
    menu.classList.remove("is-showing");
  }
  else
  {
    menu.classList.add("is-showing");
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #333;
}


.navigation {
  background: #fff;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  padding: 20px;
}

.menu {
  list-style: none;
  padding-left: 22px;
  margin: auto;
  display: none;
}
.menu.is-showing {
  display: inline-flex;
}
.menu__item {
  background: #fff;
}

.box {
  display: block;
  background: #999;
  width: 60px;
  height: 60px;
  margin: 0 22px;
}
.box:hover {
  background: #498cdf;
}

.toggle {
  padding: 0;
  background: #e7e7e7;
  border: none;
  width: 60px;
  height: 60px;
}

<div class="navigation">
  
  <button class="toggle js-toggle">x</button>
  <ul class="menu js-menu">
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
  </ul>
  
</div>

回答3:

Try this

<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
</nav>

 a, li {
        display: block;
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        border: 1px solid yellow;
        padding: 0;
        margin: 0;
    }

    ul {
        margin: 0;
        padding: 0;
        display: none;
    }

    .expand{
          display: block;
    }

$("nav .nav-btn").click(function(){
	
  $("nav ul").toggleClass("expand");
});

a, li {
    display: block;
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    border: 1px solid yellow;
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    display: none;
}

.expand{
      display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
</nav>

来源：https://stackoverflow.com/questions/58158580/horizontal-toggle-dropdown

标签

javascript

html

css

dropdown