Jquery 在同一地点显示/隐藏跨度

我正在使用jQuery显示或隐藏跨度。但是我希望

显示在我单击的链接所在的位置。当前代码实际上在屏幕左侧显示

标记。这是我正在使用的代码

<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>

$（文档）.ready（函数（）{
$（“.slidingDiv”）.hide（）；
$（“.show_hide”）.show（）；
$（'.show_hide'）。单击（函数（）{
$（“.slidingDiv”）.slideToggle（）；
返回false；
});
$（“.slidingDiv1”）.hide（）；
$（“.show_hide1”）.show（）；
$（'.show_hide1'）。单击（函数（）{
$（“.slidingDiv1”）.slideToggle（）；
返回false；
});
});

跨度标签：

<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>

由岛屿、地区、州（政府辖区）、城市和周围社区组成。主岛本州有34个县，组成5个地区。这个

删除div并将span设置为显示：块

<a href="#" class="show_hide">Japan</a>
<a href="#" class="show_hide">Close</a>
<span class="slidingDiv">
    <img src="02-1 ImageFiles/01 Japan.JPG" style="width:235px; height:245px;" />    
</span>

span
{
   display: block;
}​

跨度
{
显示：块；
}​

---

这可以是您的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&#197;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>

由岛屿、地区、州（政府辖区）、城市和周围社区组成。主岛本州有34个县，组成5个地区。这个

这可以是您的脚本部分：

<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;
    });
});

$（文档）.ready（函数（）{
$（“.slidingDiv”）.hide（）；
$（“.show_hide”）.show（）；
$（'.show_hide'）。单击（函数（）{
var el=$（本）；
var slidingDiv=el.find（“span.slidingDiv”）；
如果（滑动div.length>0）{
slidingDiv.slideToggle（函数（）{el.after（slidingDiv）；}）；
}
否则{
slidingDiv=el.next（“span.slidingDiv”）；
el.追加（滑动div）；
slidingDiv.slideToggle（）；
}
返回false；
});
$（'.show\u hide\u close'）。单击（函数（）{
$（this）.parent（）.parent（“a.show_hide”）。单击（）；
返回false；
});
});

说明：

• 脚本将在单击时将跨度附加到锚点，并在关闭时将其移回原始位置。 原因是不能在html代码中的锚标记中包装块（这里是span），因此我们将在运行时进行包装。我们应该把它包起来，因为我们需要在锚标签下面显示跨度

• 包含img和关闭按钮的量程应具有绝对位置

• 将被单击的锚点应具有相对位置，以便浏览器可以从父锚点计算跨度的位置，因此它现在将位于链接下方

• 我对锚点类和跨度类进行了通用化，因此您只能将其用于一个脚本块

• 已为“关闭”按钮指定了不同的类，因此单击该按钮将单击父锚点

---

您发布的代码中没有div。我尝试过，但无效。我有几个这样的链接。当我单击它们时，它们的图像显示在窗口的左侧，与链接的位置不同。它不起作用。我希望我的span显示在我单击的链接下面。我知道它不起作用，它是你的原始代码，供人们在调试时使用。没有G-Man，我只是说我把你的代码放在一个小提琴里，然后发布在这里，这样人们可以在试图解决你的问题时使用它。这不是我正在寻找的解决方案。我希望我的跨度显示在我单击的链接下方。但是您的解决方案使图像出现在左侧，请检查我编辑的问题。我使用超过2个链接。我不想使用div标记，但我想使用span标记来避免换行。我使用了您的代码，但它不起作用。签出此页面如果是这样的话，那么您需要将其封装在另一个容器中，并使用position:relative属性。。否则很难确定它的位置。。如果不希望块效应仍然显示为相同，可以将div设置为inline或inline bloc。-我按照你说的实现了，但它不起作用。该图像仍显示在页面左侧，我希望该图像显示在链接下方。@G-Man是否替换了HTML代码？您忘了将“位置：相对”添加到锚点，将“位置：绝对”添加到span.slidingDiv
我已在解释部分对其进行了解释；-）哦，明白了。但是跨度隐藏了文本。我怎样才能解决这个问题？当然可以！这是因为您希望跨距显示在链接下方。。此外，当读者想要查看跨度时，不需要阅读跨度下方的文本。我不明白，请多解释一下你想要什么。。！？我的要求是用户必须能够同时看到文本和跨度。如果用户想要关闭图像，他也可以这样做。在我以前的代码中，跨距出现在页面的左侧，但文本移动到跨距下方。我想要那样的。