javascript - HTML/JS 中的弹出窗口只需点击两次即可弹出

Question

我正在编写一个非常简单的 HTML/JS 代码来“弹出”字典条目，这只是一个非常基本的“维基百科引用资料”。有一些问题，否则我不会打扰 :) 顺便说一句，我在 HTML/CSS/JS 方面不是很熟练，这可能是我正在做的一些非常愚蠢的事情!

第一个也是最重要的问题:弹出窗口有效，但是在单击两次 之后。我真的不知道为什么。第一次点击没有任何反应，第二次点击正确地显示了我的弹出框。

第二个问题是可选的，真的。就是这样:框出现在屏幕的左侧。是否可以将它们放在我正在单击的链接下？当然，与链接位置无关。

注意:我现在使用的是 span，但使用链接没有任何不同。

谢谢和干杯!

HTML:

<p class="text">
The text will contain dictionary entries, as an example, the
<span class="dict" onclick="showHide('thekey')">following entry</span>.
<span class="entry" id="thekey">
Lorem ipsum dolorem sit amet. Lorem ipsum dolorem sit amet. Lorem ipsum dolorem sit amet. Lorem ipsum dolorem sit amet. Lorem ipsum dolorem sit amet. Lorem ipsum dolorem sit amet. Lorem ipsum dolorem sit amet. Lorem ipsum dolorem sit amet. 
</span>
</p>

CSS:

.dict {
    display: inline;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #f69292;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.entry {
    position: absolute;
    display: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-left: 100px;
    color: white;
    min-height: 128px;
    width: 400px;
    background-color: #ff8080;
    border: 1px solid red;
    line-height: 1.2em;
    font-family: Arial, Helvetica, sans-serif;
    }

JavaScript:

// Show or hide a dictionary
function showHide(id)
{
    var e = document.getElementById(id);

    if (e.style.display == 'none')
        e.style.display = 'block';
    else
        e.style.display = 'none';
}

Answer 1

单击一次不起作用的原因是因为以下代码:

if (e.style.display == 'none')
    e.style.display = 'block';
else
    e.style.display = 'none';

它所做的是检查元素的内联样式的值。因为，你已经使用了一个类，它并没有完全给你值(value)，而是以空白结束。所以你可以把它改成这样:

if (e.style.display == 'none' || e.style.display == '') {
    e.style.display = 'block';
}
else {
    e.style.display = 'none';
}

你可以在这里看到这个-> http://jsfiddle.net/W9fqb/1/

关于你问题的第二部分，如果你想把它们放在下一行 那么 position:relative 可以帮助你。但是，由于您希望将它们放在链接下(如工具提示)，因此您可以使用第三方工具来节省大量时间和精力(例如 Tooltipster)。

更新:

只是为了展示如何使用 Tooltipster 来实现您想要的输出:http://jsfiddle.net/W9fqb/2/

注意: 目前这在 hover 上有效，但如果你看到他们的文档，你将能够通过单击鼠标实现这一点，这就是方式你想要的。

希望这有帮助!!!