Question

我希望能够通过CSS在我的HTML原型中的任何位置放置一个下拉列表。这意味着我需要能够在页面的任何位置放置多个下拉列表。

现在我用它来创建一个下拉列表：

    let refundViewVC = self.storyboard?.instantiateViewController(withIdentifier: "refundViewController") as! refundViewController

    refundViewVC.delegate = self
    refundViewVC.modalPresentationStyle = .overCurrentContext
    refundViewVC.modalTransitionStyle = .crossDissolve
    refundViewVC.definesPresentationContext = true
    refundViewVC.view.backgroundColor = UIColor.init(red: 74/255, green: 74/255, blue: 74/255, alpha: 0.5)

    self.navigationController?.present(refundViewVC, animated: true, completion: nil)

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Click here 01 </button>
    <div id="myDropdown" class="dropdown-content">
       <a href="#">link</a>
       <a href="#">link</a>
       <a href="#">link</a>
    </div>
</div>

} }

如何使用相同的Javascript创建多个下拉列表？

这是一个不起作用的演示：https://codepen.io/db13/pen/pLGRwr

Answer 1

纯CSS方式

此方法仅适用于纯CSS

＆＃13;

#demo {
  margin: 30px 0 50px 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#demo .wrapper {
  display: inline-block;
  width: 180px;
  margin: 0 10px 0 0;
  height: 20px;
  position: relative;
}

#demo .parent {
  height: 100%;
  width: 100%;
  display: block;
  cursor: pointer;
  line-height: 30px;
  height: 30px;
  border-radius: 5px;
  background: #F9F9F9;
  border: 1px solid #AAA;
  border-bottom: 1px solid #777;
  color: #282D31;
  font-weight: bold;
  z-index: 2;
  position: relative;
  -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
  -webkit-transition-delay: .8s;
  text-align: center;
}

#demo .parent:hover,
#demo .content:hover~.parent {
  background: #fff;
  -webkit-transition-delay: 0s, 0s, 0s;
}

#demo .content:hover~.parent {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 0;
}

#demo .content {
  position: absolute;
  top: 0;
  display: block;
  z-index: 1;
  height: 0;
  width: 180px;
  padding-top: 30px;
  -webkit-transition: height .5s ease;
  -webkit-transition-delay: .4s;
  border: 1px solid #777;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

#demo .wrapper:active .content {
  height: 123px;
  z-index: 3;
  -webkit-transition-delay: 0s;
}

#demo .content:hover {
  height: 123px;
  z-index: 3;
  -webkit-transition-delay: 0s;
}

#demo .content ul {
  background: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#demo .content ul a {
  text-decoration: none;
}

#demo .content li:hover {
  background: #eee;
  color: #333;
}

#demo .content li {
  list-style: none;
  text-align: left;
  color: #888;
  font-size: 14px;
  line-height: 30px;
  height: 30px;
  padding-left: 10px;
  border-top: 1px solid #ccc;
}

#demo .content li:last-of-type {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

＆＃13;

<div id="demo">
  <div class="wrapper">
    <div class="content">
      <ul>
        <a href="#">
          <li>Parent 1 Element 1</li>
        </a>
        <a href="#">
          <li>Parent 1 Parent 1 Element 1</li>
        </a>
        <a href="#">
          <li>Parent 1 Element 1</li>
        </a>
        <a href="#">
          <li>Parent 1 Element 1</li>
        </a>
      </ul>
    </div>
    <div class="parent">Button 1</div>
  </div>

  <div class="wrapper">
    <div class="content">
      <ul>
        <a href="#">
          <li>Parent 2 Element 1</li>
        </a>
        <a href="#">
          <li>Parent 2 Element 2</li>
        </a>
        <a href="#">
          <li>Parent 2 Element 3</li>
        </a>
        <a href="#">
          <li>Parent 2 Element 4</li>
        </a>
      </ul>
    </div>
    <div class="parent">Button 2</div>
  </div>

＆＃13;

Vanilla JavaScript

使用vanilla javascript的方法

来自我自己的GitHub存储库here

的引用

＆＃13;

function fadeIn(el) {
  el.style.opacity = 0;
  el.style.display = "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += 0.1) >= 1.1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  }());
}

function fadeOut(el) {
  (function fade() {
    var val = parseFloat(el.style.opacity);
    if ((val -= 0.1) == 0) {
      el.style.opacity = 0;
      el.style.display = "none";
    } else {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  }());
}

// Initialise all the required variables
var btn = document.querySelectorAll(".btn");

/*
 *	Button click event listeners
 *	Keeps track of the button click.
 */
btn.forEach(function(btn) {
  btn.addEventListener("click", function(e) {
    e.stopPropagation();
    var sibling = btn.nextElementSibling,
      firstVisible = document.querySelector('.visible'),
      dropDown;

    /*
     * Remove the visible class if an element is already in the DOM
     */
    if (firstVisible) {
      fadeOut(firstVisible);
      firstVisible.classList.remove("visible");
    }

    if (!sibling.classList.contains("visible")) {
      fadeIn(sibling);
      sibling.classList.add("visible");
    } else {
      fadeOut(sibling);
      sibling.classList.remove("visible");
    }
  });
});

document.addEventListener("click", function() {
  var visible = document.querySelector(".visible");

  if (visible) {
    fadeOut(visible);
    visible.classList.remove("visible");
  }
});

＆＃13;

.btn {
  outline: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #e0e0e0;
  color: #7b7b7b;
  width: 150px;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, .18);
  font-weight: bold;
  margin-bottom: 20px;
  transition: all .3s ease-in-out;
}

.btn:active {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px 1px rgba(0, 0, 0, .2);
  background-color: rgba(158, 158, 158, .4);
}

.btn-dropdown {
  padding: 0px;
  margin: 0px;
  list-style: none;
  background-color: #fff;
  position: absolute;
  left: 0px;
  top: 30px;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, .18);
  min-width: 200px;
  border: 1px solid #ddd;
  text-align: initial;
  max-height: 210px;
  overflow: auto;
  display: none;
  z-index: 100;
}

.btn-dropdown li {
  padding: 6px;
  margin: 0px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.btn-dropdown li:hover {
  background-color: #ddd;
}

.btn-dropdown li:last-child {
  border-bottom: none;
}

.dropdown {
  position: relative;
  display: inline;
}

＆＃13;

<div>
  <div class="dropdown">
    <button class="btn">First Color</button>
    <ul class="btn-dropdown">
      <li>Brown</li>
      <li>Red</li>
      <li>Orange</li>
      <li>Yellow</li>
      <li>Green</li>
      <li>Blue</li>
      <li>Violet</li>
      <li>Grey</li>
      <li>White</li>
    </ul>
  </div>

  <div class="dropdown">
    <button class="btn">Second Color</button>
    <ul class="btn-dropdown">
      <li>Brown</li>
      <li>Red</li>
      <li>Orange</li>
      <li>Yellow</li>
      <li>Green</li>
      <li>Blue</li>
      <li>Violet</li>
      <li>Grey</li>
      <li>White</li>
    </ul>
  </div>
</div>

＆＃13;

jQuery Way

使用jQuery接近你需要一个额外的插件（对不起）

过去Drop down list items still clickable when the opacity is zero

引用我自己的问题

＆＃13;

$(".btn").on('click', function(e) {
  e.stopPropagation();
  var $dropdown = $(this).siblings().fadeToggle(); // toggle this dropdown
  $('.dropdown .btn-dropdown').not($dropdown).fadeOut(); // hide other dropdowns
});

$(document).on('click', function(e) {
  $('.dropdown .btn-dropdown').fadeOut(); // hide all dropdowns
});

＆＃13;

.btn {
  outline: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #eee;
  color: #7b7b7b;
  width: 150px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  font-weight: bold;
  margin-bottom: 20px;
}

.dropdown {
  position: relative;
  display: inline;
}

.btn-dropdown {
  padding: 0px;
  margin: 0px;
  list-style: none;
  background-color: #fff;
  position: absolute;
  left: 0px;
  top: 30px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  min-width: 200px;
  border: 1px solid #ddd;
  text-align: initial;
  max-height: 210px;
  overflow: auto;
  display: none;
  z-index: 100;
}

.btn-dropdown li {
  padding: 6px;
  margin: 0px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.btn-dropdown li:hover {
  background-color: #ddd;
}

.btn-dropdown li:last-child {
  border-bottom: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>

<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>Black</li>
    <li>Brown</li>
    <li>Red</li>
    <li>Orange</li>
  </ul>
</div>

＆＃13;

Answer 2

您的部分问题是 ID 应唯一。您的函数每次都有效地调用#myDropdown。

您可以修改函数以将this作为上下文目标传递给它，并使用类名动态获取下拉列表。

查看此示例： CodePen Demo

将您的onclick更改为：

 <button onclick="myFunction(this)" class="dropbtn">Click here 01 </button>

并将myFunction更改为：

var myFunction = function(target) {
   target.parentNode.querySelector('.dropdown-content').classList.toggle("show");
}

多个CSS / JS下拉列表

2 个答案: