更多信息 - 扩展div

-1

我在Javascript/HTML中的“更多信息”脚本的帮助后。更多信息 - 扩展div

当前代码：

<div id="information"> 
    Content 
    <div id="more_information" style="display:none;"> 
     More content 
    </div> 
<a href="#" onclick="showhide('more_information');">More information</a> 
</div>

的Javascript：

function showhide(layer_ref) { 

if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { 
eval("document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
info = document.getElementById(layer_ref); 
info.style.display = state; 
} 
}

干杯

来源

2012-08-23 Dean

什么是你的问题？ –

JS：

function showhide(layer_ref) { 
    var el = document.getElementById(layer_ref); 
    var visible = el.style.display == 'block' // current state 
    el.style.display = visible ? 'none' : 'block'; 
    return !visible; // new state (true=visible,false=invisible) 
}

HTML：

<a href="#" onclick="if(showhide('more_information')){this.innerHTML='Less information'}else{this.innerHTML='More information'};return false;">More information</a>

来源

2012-08-23 12:58:13 Peter

无论如何，我可以删除“更多信息”一旦其点击？或更好，把它变成“少信息”。 – Dean

@Dean检查我的答案 – Peter

对不起，但这不起作用。 – Dean

我建议使用jQuery，这使得它容易得多：

jQuery("#information a").click(function(){ 
    jQuery(this).parent().find("#more_information").toggle(); 
});

来源

2012-08-23 12:59:39 Asciiom

这是怎么回事？它显示/隐藏div点击链接 – Asciiom

现在删除了我的downvote，你添加了'.parent（）'。在此之前，这是行不通的。无论如何，这不是一个jQuery的问题，并不需要jQuery的答案。普通的js解决方案非常简单。 – bfavaretto

，如果您有ID为 “more_information” 只有一个DOM元素，它只会工作：

function showhide(nodeId) { 
    var node = document.getElementById(nodeId); 
    if (node) { 
     node.style.display = node.offsetWidth ? 'none' : 'block'; 
    } 
}

如果您在页面上应该使用这种结构很少：

HTML：

个

<div id="information"> 
    Content 
    <div id="more_information" style="display:none;"> 
     More content 
    </div> 
    <a href="#" onclick="showhide(this); return false;">More information</a> 
</div>

JS：

function showhide(node) { 
    var moreNode = node.previousSibling, i = 5; 
    while (moreNode.nodeType != 1 && i--) { 
     moreNode = moreNode.previousSibling; 
    } 

    if (moreNode && moreNode.nodeType == 1) { 
     moreNode.style.display = moreNode.offsetWidth ? 'none' : 'block'; 
    } 
}

来源

2012-08-23 13:04:44 Serjio

更多信息 - 扩展div

回答

相关问题