用于隐藏和显示文本的 javascript 切换功能 - 如何添加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9280037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript toggle function to hide and display text - how to add images
提问by Suzi Larsen
I am currently using the below text as a simple way of hiding and displaying my text. What I was trying to do though also was use the css to display the a tag with a background image:
我目前使用以下文本作为隐藏和显示文本的简单方法。我试图做的也是使用 css 显示带有背景图像的标签：
one to have a plus symbol for when the text is hidden.
一个在文本隐藏时有一个加号。
Then one to have a minus symbol for when the text is displayed and you want to hide the text again.
然后当文本显示时有一个减号，你想再次隐藏文本。
JavaScript:
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:
HTML：
<a id="displayText" href="javascript:toggle();">Show Further Details & Specification</a>
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>
采纳答案by Diodeus - James MacFarlane
You need to set up the CSS for "displayText" to give it a background.
您需要为“displayText”设置 CSS 以提供背景。
Something like this:
像这样的东西：
#displayText {
display:block;
height:20px;
padding-left:30px;
background-image:url(../images/plus.png);
}
Then swap the image for the alternate state:
然后将图像交换为备用状态：
#displayText.active {
background-image:url(../images/minus.png);
}
So in your code you'll need to add/remove the "active" class name on displayText based on the toggle state.
因此，在您的代码中，您需要根据切换状态在 displayText 上添加/删除“活动”类名称。
P.S. It's considered bad form to used "href" for JS events. It's better to use onclick.
PS 对 JS 事件使用“href”被认为是不好的形式。最好使用onclick。
<a id="displayText" href="javascript://" onclick="toggle();">
回答by Francisco Valdez
Next time try to post your code in jsfiddlethere are some issues with your code, first is better to put event handlers rather than put the javascript code in the href property, is easier to use a variable to save the state of the toggle button. Works almost 99% of the times if you show your elements with inline rather than block
下次尝试在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:
html：
<a id="displayText" href="#" onclick="toggle();">Show Further Details Specification</a>
<div id="toggleText" style="display:none;"><h1>peek-a-boo</h1></div>?
