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

Question

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

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()
})

我也试着用 <select> 来做, bu 没有成功。也试试 show() & hide() jQuery 的方法。我真的不知道我哪里错了。

Answer 1

简单地切换一个类:

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>