更多信息 - 擴展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

回答

相關問題