javascript 单击链接时切换 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20104811/
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
Toggle div on link click
提问by MOTIVECODEX
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function ()to $("toggle").click(function ()and <a>Toggle Edit Mode</a>to Toggle Edit Mode`, but doesn't work. Any idea's?
现在发生的是，每当我有另一个链接示例时，它也会使用此链接作为切换按钮。我只想切换编辑模式来切换隐藏 div 的开/关。所以我尝试更改$("a").click(function ()为$("toggle").click(function ()和<a>Toggle Edit Mode</a>切换编辑模式`，但不起作用。有任何想法吗？
HTML
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
回答by Krishna
You want this.
你要这个。
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggleto the link for which you want to toggle.
您不能使用$("toggle")，因为它会查找 html 标记<toggle>。而是向toggle要切换的链接添加一个类。
回答by Fabien Sa
Use "ID" selector.
使用“ID”选择器。
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
一页中可以有许多类 (class=...)，但每页只能有 id (id=...)。更多信息在这里。
Javascript:
Javascript：
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
网址：
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});.hidden {
display: none;
}
.unhidden {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>回答by R. Oosterholt
回答by JJ_Coder4Hire
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
这对我有用。允许我显示或隐藏具有相同链接的文本。我将链接与我想要显示的 div 相关联。这适用于具有多条记录的列表，每条记录都有自己的 ID。
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>
