在按钮单击显示列表项时，下拉列表不应隐藏，直到再次单击按钮答案

【问题标题】：On button click display list items, dropdown list should not hide until button is clicked again在按钮单击显示列表项时，下拉列表不应隐藏，直到再次单击按钮
【发布时间】：2019-03-21 13:20:54
【问题描述】：

当我试图开发一个下拉按钮时，我到处寻找，但是按钮显示的是无序列表项目，而不是选项，但是当用户单击按钮时，按钮不会关闭，而是为了关闭按钮，则需要再次点击按钮。

您将在下面找到按钮未单击时的显示方式以及按钮被单击时的显示方式。

如果您还访问以下网站，您将通过单击“查看我们的网站列表”看到按钮的示例

Button on a website for example

任何帮助将不胜感激，并提前致谢。

【问题讨论】：

分享你的代码，帮助你真的会更简单。
“而不是选项然后按钮显示无序列表项目”......你是什么意思？ “选项”和“列表项”有什么区别？谁在给它们下订单？那是什么顺序？好的，这是一个需求列表，但是您面临的实际问题是什么？你试过什么？什么不工作？这里没有什么需要我们回答的。您还没有向我们提问。
我没有代码，因为我不知道从哪里开始这样的事情，但我可以发送我正在谈论的内容的图片
那我们看图吧。
嗨@Kyle，一定要accept an answer，这样它会帮助别人。我注意到您的大多数问题都没有被接受的答案。 stackoverflow.com/help/someone-answers

标签： javascript jquery html css

【解决方案1】：

我不确定我是否明白你想要什么。但这里有一个你问的例子，一个按钮，当你点击时，会显示一个列表。当你点击一个项目时，列表就会消失，你就有了这个项目。希望这对您有所帮助。这是一个简单的代码，但如果您有任何问题，请继续提问！

function closeList(e) {
    var site = e.target.innerText;
    alert(site + ' clicked!!');
    document.querySelector('#dvSites').style.display = 'none';
}


function showList() {
    var dvSites = document.querySelector('#dvSites');
  
    if (dvSites.style.display === '')
        return; // already visible
 
    dvSites.style.display = '';
}

// Add eventListener to close the div
var lis = document.querySelector('#dvSites').querySelectorAll('li');
for(var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', closeList);
}

// Add eventListener to open the div
document.querySelector('#btnShow').addEventListener('click', showList);

<button id="btnShow">Show sites!!</button>
<div id="dvSites" style="display: none">
    <ul>
        <li>stackoverflow.com</li>
        <li>www.google.com</li>
        <li>www.sipmann.com</li> <!-- :) -->
    </ul>
</div>

【讨论】：

【解决方案2】：

给你，我用过的关键功能；

.click()对于a标签或链接，会调用.click()里面的函数。

.slideToggle()点击后的ul，这将根据其状态隐藏或显示目标元素。

然后将 positon:absolute 添加到 ul 中，这样就不会影响内联元素。

$(document).ready(function() {
  $(".toggle-button").click(function() {
    $(this).parent().find("ul").slideToggle(function() {
      // Animation complete.
    });
  });
})

.links-unordered {
  display: inline-block;
  position: relative;
}

.links-unordered {
  margin-top: 20px;
  min-height: 30px;
}

.links-unordered .toggle-button {
  text-decoration: none;
  padding: 12px 16px 12px 16px;
  transition: 0.2s;
  border: 1px solid black;
}

.links-unordered .toggle-button:hover,
.links-unordered .toggle-button:active,
.links-unordered .toggle-button:focus,
.links-unordered .toggle-button:visited {
  text-decoration: none;
  color: black;
}

.links-unordered .toggle-button:hover {
  border-width: 2px;
}

.links-unordered ul {
  position: absolute;
  top: 10px;
  margin-top: 25px;
  padding-inline-start: 20px;
}

.links-unordered ul li {
  line-height: 25px;
  padding-left: 15px;
}

.links-unordered a {
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="links-unordered">
  <a class="toggle-button" href="#">SEE OUR LIST OF WEBSITES</a>
  <ul style="display:none;">
    <li><a href="#">cdn.sc.rockstargames.com</a></li>
    <li><a href="#">lifeinvader.com</a></li>
    <li><a href="#">rockstargames.com</a></li>
    <li><a href="#">socialclub.rockstargames.com</a></li>
  </ul>
</div>

<div class="links-unordered">
  <a class="toggle-button" href="#">SEE OUR LIST OF WEBSITES</a>
  <ul style="display:none;">
    <li><a href="#">cdn.sc.rockstargames.com</a></li>
    <li><a href="#">lifeinvader.com</a></li>
    <li><a href="#">rockstargames.com</a></li>
    <li><a href="#">socialclub.rockstargames.com</a></li>
  </ul>
</div>

【讨论】：