用于隐藏和显示文本的 javascript 切换功能 - 如何添加图像答案

【问题标题】：javascript toggle function to hide and display text - how to add images用于隐藏和显示文本的 javascript 切换功能 - 如何添加图像
【发布时间】：2012-02-15 00:20:24
【问题描述】：

我目前正在使用以下文本作为隐藏和显示文本的简单方法。我试图做的也是使用 css 来显示带有背景图像的 a 标签：

当文本被隐藏时有一个加号。

然后一个减号表示文本何时显示并且您想再次隐藏文本。

JavaScript：

function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";    
    }
}

HTML：

<a id="displayText" href="javascript:toggle();">Show Further Details & Specification</a>
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

下次尝试将您的代码发布到jsfiddle 您的代码存在一些问题，首先最好将事件处理程序而不是将javascript代码放在 href 属性中，更容易使用变量来保存切换按钮的状态。如果您使用内联而不是块显示元素，则几乎 99% 的时间都有效

var textHidden = true;
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(textHidden) {
    ele.style.display = "inline";
    text.innerHTML = "Show";
    textHidden = false

}
else {
    textHidden = true
    ele.style.display = "none";
    text.innerHTML = "Hide";

}
}

html:

<a id="displayText" href="#" onclick="toggle();">Show Further Details Specification</a>    
<div id="toggleText" style="display:none;"><h1>peek-a-boo</h1></div>

【讨论】：

谢谢，效果很好。我使用了 onclick 而不是将其放在 href 中。
您有什么理由在函数内部而不是外部定义ele 和text 变量？
不，但实际上如果你想在 IE 6 和 7 中提高性能，你应该将所有不再使用的变量（如函数末尾的 ele 和 text）设置为 null，这样它们就可以被垃圾收集。

【解决方案2】：

你需要为“displayText”设置 CSS 来给它一个背景。

类似这样的：

#displayText {
    display:block;
    height:20px;
    padding-left:30px;
    background-image:url(../images/plus.png);
}

然后将图像交换为备用状态：

#displayText.active {
    background-image:url(../images/minus.png);
}

因此，在您的代码中，您需要根据切换状态在 displayText 上添加/删除“活动”类名称。

附：将“href”用于 JS 事件被认为是不好的形式。最好使用onclick。

<a id="displayText" href="javascript://"  onclick="toggle();">

【讨论】：