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没有成功。还可以尝试jQuery的show() & hide()方法。我真的不知道我在哪里错了。

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>

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

1 个答案: