时间戳

首页 > 解决方案 > 如何通过单击显示/隐藏下拉菜单？

javascript - 如何通过单击显示/隐藏下拉菜单？

问题描述

我正在创建一个下拉元素，下面只有一个选项。当我需要显示/隐藏此选项时，我卡住了。

HTML：

<div id="div1">
    <i class="fa fa-plus-square" title="Some title" type="button">
    <span id="spanId" title="Some other title">Some text</span>
</div>

<i>- 是图像下拉按钮。

CSS：

#div1 {
    cursor: pointer;
    /*styles, which are not related to the issue*/
}
#spanId {
    display: none;
    /*some other styles*/
}
#spanId :hover {
    background: #e7edf4;
}

所以，跨度是隐藏的。我可以显示它，但在那之后它永远可见，我无法隐藏它。

JS/JQuery：

let visible = false
const toggleButton = $('#div1')
const dropDownBtn = $('#spanId')
const someOtherButton = $('#someId')

toggleButton.click(() => {
    dropDownBtn.css("display", "block")
    visible = true
})

if(visible == true){
    $(document).click(() => {
       dropDownBtn.css("display", "none")
       visible = false
    })
}

dropDownBtn.click(() => {
    someOtherButton.click()
})

我也尝试用 bu 来做<select>，但没有成功。也试试show() & hide()jQuery的方法。我真的无法意识到我错在哪里。

标签： javascriptjqueryhtmlcss

解决方案

只需切换一个类：

div1.addEventListener('click', () => spanId.classList.toggle('visible'))
document.addEventListener('click', (e) => {
  if (!div1.contains(e.target)) spanId.classList.remove('visible')
})
#spanId { display: none; }
#spanId.visible { display: block; }
<div id="div1">
    <i class="fa fa-plus-square" title="Some title">ICON HERE</i>
    <span id="spanId" title="Some other title">Some text</span>
</div>

您的代码也有错误。<i>没有正确关闭，并且没有i属性type。您的评论中已经提到了您所犯的 Javascript 逻辑错误。

或者，如果您坚持使用 jQuery：

$(div1).on('click', () => $(spanId).toggleClass('visible'))
#spanId {
  display: none;
}

#spanId.visible {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <i class="fa fa-plus-square" title="Some title">ICON HERE</i>
  <span id="spanId" title="Some other title">Some text</span>
</div>

推荐阅读