Показать/скрыть пробел в том же месте

Я использую 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>

источник

2012-10-29 Gravity M

http://jsfiddle.net/3AfUS/1/ –

В коде, который вы отправили, нет div. –

Я пробовал, но не работал. У меня есть несколько таких ссылок. Когда я нажимаю на них, их изображения появляются в левой части окна, а не в том же месте, что и ссылка. –

это может быть ваш 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; 
    }); 
});

Объяснение:

скрипт добавит срок к якорю по щелчку и переместить его обратно его первоначальное место при закрытии. причина в том, что вы не можете обернуть блок (здесь это span) в тег привязки в html-коде, поэтому мы сделаем это во время выполнения. и мы должны обернуть его, потому что нам нужно показать диапазон ниже тега привязки.
оболочка, содержащая IMG и кнопку закрытия должна иметь абсолютное положение
якоря, который будет нажат должна иметь относительную позицию так, браузер может вычислить положение пролета от родительского якоря, так что он теперь будет ниже ссылка
Я обобщил анкерные и диапазон классов, так что вы можете использовать его только один блок сценария
другой класс был назначен на кнопку закрытия, так щелкнув по нему щелкнет родительский якорь

источник

2012-10-29 17:35:50 Mahyar

оставался неизменным. http://www.mapisms.seas.gwu.edu/2.php - Я реализовал, как вы сказали, но не работает. Изображение по-прежнему отображается в левой части страницы, где я хочу, чтобы изображение было показано ниже ссылки. –

@ G-Man вы заменили HTML-код? вы забыли добавить «положение: относительное» к якорю и «position: absolute» to span.slidingDiv
Я объяснил это в разделе Объяснение ;-) – Mahyar

О, это получилось. Но диапазон скрывает текст. Как я могу это разрешить? –

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

Check Fiddle

источник

2012-10-29 15:13:26

Это не решение, которое я ищу. Я хочу, чтобы мой диапазон появлялся ниже моей ссылки, которую я нажал. Но ваше решение заставляет изображение появляться на левой стороне –

Отредактированный пост –

Пожалуйста, проверьте мой отредактированный вопрос. Я использую более двух ссылок. Я не хочу использовать тег div, но я хочу использовать тег span, чтобы избежать новой строки. –

Показать/скрыть пробел в том же месте

ответ

Смежные вопросы