我正在使用 jQuery 来显示或隐藏跨度。但我想要 <div>
与我点击的链接出现在同一个地方。当前代码实际上显示了 <div>
屏幕左侧的标签。这是我正在使用的代码。
<script>
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
return false;
});
$(".slidingDiv1").hide();
$(".show_hide1").show();
$('.show_hide1').click(function(){
$(".slidingDiv1").slideToggle();
return false;
});
});
</script>
跨度标签:
<span>
<a href="#" class="show_hide">Japan</a>
<span class="slidingDiv">
<img src="02-1 ImageFiles/01 Japan.JPG" style="width:235px; height:245px;">
<a href="#" class="show_hide">Close</a>
</span>
is made up of islands, regions, prefectures (government districts), cities, and surrounding communities. The main island, Honshu, has thirty-four prefectures making up five regions. The
<a class="show_hide1" href="#">Tōhoku Region</a>
<span class="slidingDiv1">
<img src="02-1 ImageFiles/02 TohokuRegion.JPG" style="width:217px; height:236px;">
<a href="#" class="show_hide1">Close</a>
</span>
最佳答案
这可以是您的 HTML 部分:
<a href="#" class="show_hide" style="position: relative;">Japan</a>
<span class="slidingDiv" style="position: absolute; left: 0;">
<img src="02-1 ImageFiles/01 Japan.JPG" style="width: 235px; height: 245px;" />
<a href="#" class="show_hide_close">Close</a>
</span>
is made up of islands, regions, prefectures (government districts), cities, and surrounding communities. The main island, Honshu, has thirty-four prefectures making up five regions. The
<a class="show_hide" href="#" style="position: relative;">TÅhoku Region</a>
<span class="slidingDiv" style="position: absolute; left: 0;">
<img src="02-1 ImageFiles/02 TohokuRegion.JPG" style="width: 217px; height: 236px;" />
<a href="#" class="show_hide_close">Close</a>
</span>
这可以是您的脚本部分:
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
var el = $(this);
var slidingDiv = el.find("span.slidingDiv");
if (slidingDiv.length > 0) {
slidingDiv.slideToggle(function () { el.after(slidingDiv); });
}
else {
slidingDiv = el.next("span.slidingDiv");
el.append(slidingDiv);
slidingDiv.slideToggle();
}
return false;
});
$('.show_hide_close').click(function () {
$(this).parent().parent("a.show_hide").click();
return false;
});
});
解释:
脚本会在单击时将跨度附加到 anchor ,并在关闭时将其移回原来的位置。 原因是你不能在 html 代码的 anchor 标记中包装一个 block (这里是跨度),所以我们将在运行时进行。我们应该包装它,因为我们需要在 anchor 标记下方显示跨度。
包含 img 和关闭按钮的 span 应该有绝对位置
将被点击的 anchor 应该有相对位置,以便浏览器可以从父 anchor 计算跨度的位置,所以它现在将在链接下方
我概括了 anchor 和 span 类,所以你可以只用一个脚本 block 来使用它
不同的类已经分配给关闭按钮,所以点击它会点击父 anchor
关于jquery - 在同一地点显示/隐藏跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13124300/