переключать div, но показывать только один

Question

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

Я делал это с show and hide, но это выглядит плохо, потому что я потерял анимацию из slideToggle.

Итак, каков наилучший способ скрыть все переключенные элементы div и затем открыть новый?

Вот мой HTML-код:

<div id="mainContainer">
  <div id="rowOne">
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneLeftImage" />
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneMiddleImage" />
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneRightImage"/>
  </div>

  <div id="rowOneLeftImageHidden">
      This is information for the left image in the first row.
  </div>

  <div id="rowOneMiddleImageHidden">
      This is information for the middle image in the first row.
  </div> 

   <div id="rowOneRightImageHidden">
      This is information for the right image in the first row.
  </div>

и Jquery to Toggle (но множественные элементы div могут бытьоткрыл с этим ...):

$('#rowOneLeftImage').click(function(){
        $("#rowOneLeftImageHidden").slideToggle();
    });
    $('#rowOneMiddleImage').click(function(){
        $("#rowOneMiddleImageHidden").slideToggle();
    });
    $('#rowOneRightImage').click(function(){
        $("#rowOneRightImageHidden").slideToggle();
    });

Answer 1

Поместите класс на все расширяемые div, скажем, expandable.

<div id="rowOneLeftImageHidden" class="expandable">
  This is information for the left image in the first row.
</div>

<div id="rowOneMiddleImageHidden" class="expandable">
  This is information for the middle image in the first row.
</div> 

<div id="rowOneRightImageHidden" class="expandable">
  This is information for the right image in the first row.
</div>

. Вы можете свернуть их все, ссылаясь на класс сейчас, используя slideUp () и slideDown ().

$('#rowOneLeftImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneLeftImageHidden").slideDown();
});
$('#rowOneMiddleImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneMiddleImageHidden").slideDown();
});
$('#rowOneRightImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneRightImageHidden").slideDown();

Вероятно, вы могли бы избежать всего этого дублированного кода с небольшим творческим использованием элементов данных, например, если бы изображения включали элемент target-data с идентификатором div, который вы хотите, чтобы они расширили, тогда вы не захотитене нужно писать n функций для n изображений.

Чтобы подождать, пока они не закроются, перед открытием вы можете использовать задержку, или вы можете сделать

$(".expandable").slideUp(function () {
    // this is called once the animation completes
    if ($(this).is("#rowOneLeftImageHidden")) {
        $(this).slideDown();
    }
});

Answer 2

Дайте подобным предметам общее имя класса.Это позволяет одновременно подключать обработчики ко всей коллекции

<div id="mainContainer">
  <div id="rowOne">
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneLeftImage"   class="image"/>
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneMiddleImage"   class="image" />
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneRightImage"   class="image"/>
  </div>

  <div id="rowOneLeftImageHidden" class="image_text">
      This is information for the left image in the first row.
  </div>

  <div id="rowOneMiddleImageHidden" class="image_text">
      This is information for the middle image in the first row.
  </div> 

   <div id="rowOneRightImageHidden" class="image_text">
      This is information for the right image in the first row.
  </div

JS:

$('.image').click(function(){
        /* get index position of image*/                   
        var index=$(this).index();
        /* slide up visible text, slide down text matching image indesx*/
        $('.image_text:visible,.image_text:eq('+idx+')').slideToggle()
})

Answer 3

Пусть кто-то другой сделает всю работу за вас!

Похоже, вы ищете дисплей типа "карусель", и для этого есть баджиллионов бесплатных плагинов .Или, если вы просто хотите использовать эффект «вкладок», я бы порекомендовал jQueryUI .Вам нужно научиться использовать любой плагин, который вы выберете, но большинство из них довольно просты для начала, и в итоге вы получите лучшие результаты с меньшим количеством работы с вашей стороны.

Надеюсь, что это поможет!

Answer 4

Я думаю, что это будет делать то, что вы хотите

$('#rowOneLeftImage').click(function(){
        if($('#rowOneMiddleImage').is(":visible"))
            $("#rowOneMiddleImageHidden").slideToggle();
        if($('#rowOneRightImage').is(":visible"))
            $("#rowOneRightImageHidden").slideToggle();
        $("#rowOneLeftImageHidden").slideToggle();
    });
    $('#rowOneMiddleImage').click(function(){
        if($('#rowOneLeftImage').is(":visible"))
            $("#rowOneLeftImageHidden").slideToggle();
        if($('#rowOneRightImage').is(":visible"))
            $("#rowOneRightImageHidden").slideToggle();
        $("#rowOneMiddleImageHidden").slideToggle();
    });
    $('#rowOneRightImage').click(function(){
        if($('#rowOneMiddleImage').is(":visible"))
            $("#rowOneMiddleImageHidden").slideToggle();
        if($('#rowOneLeftImage').is(":visible"))
            $("#rowOneLeftImageHidden").slideToggle();
        $("#rowOneRightImageHidden").slideToggle();
    });

Answer 5

Это не совсем то, что вы хотите, но это лучшее, что я могу сделать, чтобы помочь вам с моими ограниченными знаниями Javascript / JQuery.

function setVisibility(id) {
 if (document.getElementById('btnHide').value == 'Hide div') {
     document.getElementById('btnHide').value  = 'Show div';
     document.getElementById(id).style.display = 'none';
 } else {
     document.getElementById('btnHide').value  = 'Hide div';
     document.getElementById(id).style.display = 'block';
 }
}

И еще где-то:

<INPUT TYPE="button" id="btnHide"    Value="Hide div" onClick="setVisibility('div_name')">