javascript - 单击按钮显示列表项，下拉列表不应隐藏，直到再次单击按钮

Question

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

在下方您会看到按钮未被点击时的状态以及按钮被点击时的显示方式。

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

Button on a website for example

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

Answer 1

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

.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>