Question

我正在写一个非常简单的HTML / JS代码到＃34; pop＆＃34;字典条目，只是一个非常基本的＆＃34;维基百科的参考文献＆＃34;看起来像。有一些问题，否则我就不会烦恼了.TBW，我对HTML / CSS / JS不是很熟练，这可能是我真正做的蠢事！

首要问题：弹出窗口有效，但点击两次后。我真的不知道为什么。第一次单击不执行任何操作，第二次单击正确使我的弹出框显示。

第二个问题是可选的，真的。这是：框出现在屏幕的左侧。是否可以将放在链接下我点击了？当然，与链接位置无关。

注意：我现在正在使用span，但使用链接没有任何不同。

谢谢＆amp;干杯！

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';

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

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

你可以在这里看到这一点 - ＆gt; http://jsfiddle.net/W9fqb/1/

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

更新：

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

注意：目前这适用于hover，但是如果您看到他们的文档，您将能够通过鼠标单击实现此功能，这就是您想要的方式。

希望这有帮助!!!

Answer 2

对于双击部分，更改顺序适用于javascript：

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

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

只需点击两下即可弹出HTML / JS弹出窗口

2 个答案: