Question

当我尝试开发一个下拉按钮时，我已经到处都看过了，但是按钮没有显示选项而是显示了无序的列表项，但是当用户单击按钮时，该按钮不会关闭，但是为了关闭按钮，然后需要再次单击该按钮。

在下面，您将找到未单击按钮时的状态以及在单击按钮时出现的方式。

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

Button on a website for example

任何帮助将不胜感激，并在此先感谢。

Answer 1

这里是我使用的主要功能；

.click（）作为标记或链接，.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>

Answer 2

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

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 个答案: