javascript - 多个隐藏/显示文本

标签 javascript html css

您好,我想咨询如何为我的 WordPress 站点创建多个隐藏/显示更多编码。我在下面的代码中遇到问题,源代码混淆了。我如何区分两者?请帮忙,谢谢!

--Script1--
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click here for complete details.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide details.";
}
} 
</script><a id="displayText" href="javascript:toggle();">Click here for complete details.</a>
<div id="toggleText" style="display: none">Details</div>
</span>

--Script2--
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click here for more information.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Disclaimer.";
}
} 
</script><a id="displayText" href="javascript:toggle();">Click here for more information.</a>
<div id="toggleText" style="display: none">Information</div>
</span>

最佳答案

更改函数 的名称和id。 我希望这个答案能有所帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click here for complete details.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide details.";
}
} 
</script><a id="displayText" href="javascript:toggle();">Click here for complete details.</a>
<div id="toggleText" style="display: none">Details</div>
</span>

--Script2--
<script language="javascript"> 
function toggle1() {
var ele = document.getElementById("toggleText1");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click here for more information.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Disclaimer.";
}
} 
</script><a id="displayText1" href="javascript:toggle1();">Click here for more information.</a>
<div id="toggleText1" style="display: none">Information</div>
</span>

关于javascript - 多个隐藏/显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37935654/

相关文章:

css - 禁用 div 的蓝图 CSS

javascript - 我将如何实现下一个/上一个按钮以循环浏览 HTML 中的表格数据

html - 如何对齐div中的复选框

html - 用 2px 高度渲染的 1px 高度的线

javascript - 在 Vanilla JavaScript 中的表的每个 <tr> 行中使用 AJAX `onKeyUp` 提交表单

html - CSS 选择器只选择第一行

html - CSS -align 3 responsive Divs- left right with position fixed and center normal CSS -align 3 responsive Divs- left right 位置固定,居中正常

javascript - asp.net mvc 中的多个/可添加下拉列表

javascript - Bootstrap 弹出框内的断线

javascript - FormType 未在 Dynamics CRM 2016 上返回正确的值