Question

给出两个这样的跨度：

<span>Click for info</span>
<span style="display: none">Here is a big long string of info blah blah</span>

...我想在每个附加一个onclick功能，以便访问者看到“Click for info”，然后当他们点击它时，第一个跨度被隐藏，第二个跨度被取消隐藏。当然，当点击第二个时，事情会回到最初的状态。

我没有办法轻松生成唯一ID，因此我宁愿避免使用getElementByID（）路由，而且我宁愿不使用jQuery或任何其他重量级依赖项。是否有一种优雅的方式来做到这一点？

我到目前为止最好的想法是编写一个toggleAllSiblings（）函数，为该函数中的两个元素设置onclick，然后将每个对包装在父元素中。

可以在没有父节点的情况下完成吗？

Answer 1

如果你真的想没有id，你可以做这样的事情：

<script>
function togglePrevious(sender) {
    sender.previousSibling.style.display = "inline";
    sender.style.display = "none";
}
function toggleNext(sender) {
    sender.nextSibling.style.display = "inline";
    sender.style.display = "none";
}
</script>
<span onclick="javascript:toggleNext(this);">Click for info</span>
<span onclick="javascript:togglePrevious(this);" style="display:none">Info blablabla</span>

并且请注意，如果您使用跨度，则应该使用“内联”而不是“块”，因为它们是内联元素。将其显示样式设置为阻止将强制它们为div。

Answer 2

另一个版本，即渐进式增强功能 - 将在JavaScript关闭时正确显示完整信息。

<span class="details">Here is a big long string of info blah blah</span>

<script type="text/javascript">
    // Open/close span behaviour
    //
    function infoToggle(span) {
        var ersatz= document.createElement('span');
        ersatz.appendChild(document.createTextNode('Click for info...'));
        span.parentNode.insertBefore(ersatz, span);
        span.style.display= 'none';

        span.onclick= function() {
            ersatz.style.display= 'inline';
            span.style.display= 'none';
        };
        ersatz.onclick= function() {
            ersatz.style.display= 'none';
            span.style.display= 'inline';
        };
    }

    // Bind to all spans with class="details"
    //
    var spans= document.getElementsByTagName('span');
    for (var i= spans.length; i-->0;)
        if (spans[i].className=='details')
            infoToggle(spans[i]);
</script>

Answer 3

我不确定实现，但逻辑看起来与

类似

全力以赴
隐藏相邻的跨度在下面（让他们看不见默认情况下为JS用户）
连接均匀首先跨越的处理程序
事件处理程序功能 - 如果下一个显示下一个跨度跨度隐形，否则隐藏它

Answer 4

这是我的头脑和头部。未经测试。它应该让你至少去。

<script>
function toggle(id)
{
var display = document.getElementById(id).style.display;
if ( display == "block" )
document.getElementById(id).style.display = "none";
else
document.getElementById(id).style.display = "block";
}
</script>

<span onclick="javascript: toggle('span_to_toggle');" id="clickable_span">click here</span>

<span id='span_to_toggle' style="diplay:none">foooooooooooooooooooooo</span>

Answer 5

@Jason的快速返工：

<script>
function toggle(targetId, sender)
{
var show = document.getElementById(targetId);

show.style.display = "block";
sender.style.display = "none";
}
</script>

<span onclick="javascript: toggle('more', this);" id="less">click         here</span>

<span style="display:none;" id="more" onclick="javascript: toggle('less', this);" >foooooooooooooooooooooo</span>

Answer 6

正如您在开发涉及在DOM中创建元素的javascript内容时的旁注。如果你不打算使用像jQuery这样的东西（我不是框架的粉丝，太沉重和非特定）尝试使用一个函数来为你制作元素，那样你就没有太多冗余因为它往往使你的脚本非常沉重。

我个人使用我在www.dev-explorer.com/articles/create-dom-object找到的代码段，但您可能会找到更适合您的内容。如果您的网站下载速度更快，则用户无需等待上传活动等，并且通常不会轻易生气。

希望这是有道理的谢谢，血色

Answer 7

我宁愿不使用jQuery或任何其他重量级依赖。

我不知道这是不是一个好方法。除非你可以将任何真正的性能问题归因于使用jQuery或prototype.js（它们都不是那么重），你应该使用它们。

否则，您将花费大量时间重复打字并修复令人讨厌的浏览器错误和不兼容问题。

我无法轻易生成唯一ID

同样，你真的想要$$('div span［someParam=something］'）。并且由于库将其分配给可用的本机浏览器查询功能，因此它可能甚至不比手动编码的解决方案慢。绝对更易于维护。

如何在点击时创建一个在两个值之间翻转的元素？

7 个答案: