2

スパンを表示または非表示にするために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>
4

2 に答える 2

1

これはあなたの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>

これはスクリプトの一部になります。

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

説明：

  • スクリプトは、クリックするとアンカーにスパンを追加し、閉じると元の場所に戻ります。その理由は、htmlコードのアンカータグでブロック（ここではスパン）をラップできないため、実行時にラップします。アンカータグの下にスパンを表示する必要があるため、ラップする必要があります。

  • imgと閉じるボタンを含むスパンは絶対位置にある必要があります

  • クリックされるアンカーは、ブラウザが親アンカーからスパンの位置を計算できるように相対位置を持っている必要があるため、リンクの下になります。

  • アンカークラスとスパンクラスを一般化したので、1つのスクリプトブロックでのみ使用できます

  • 別のクラスが閉じるボタンに割り当てられているため、それをクリックすると親アンカーをクリックします

于 2012-10-29T17:35:50.497 に答える
-1

divを削除し、表示するスパンを設定します：ブロック

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

フィドルをチェック

于 2012-10-29T15:13:26.843 に答える