Переключить только один элемент div в той же позиции (скрыть все остальные элементы div) - PullRequest
Новая
       13

Переключить только один элемент div в той же позиции (скрыть все остальные элементы div)

0 голосов
/ 14 мая 2018

Я новичок в jQuery и борюсь с функцией .toggle().

Я хочу отобразить несколько <div> -элементов в одной позиции ... но только один одновременно.Если один <div> открыт, а другой «переключен», он должен автоматически закрыться.HTML: 

$(document).ready(function() {
  $("#button1").click(function() {
    $("#box1").toggle(1000);
  });
});
$(document).ready(function() {
  $("#button2").click(function() {
    $("#box2").toggle(1000);
  });
});
.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class=box1 id=box1>
    This is Box 1
  </div>

  <div class=box2 id=box2>
    This is Box 2
  </div>
</div>

<a href="#" id="button1">Box1</a>
<a href="#" id="button2">Box2</a>

Кроме того, я почти уверен, что мне нужна только одна функция toggle(), а не 4 для задачи, которую я пытаюсь достичь… но пытаюсьзвонить по одному и тому же, похоже, не работает с моим другим id / class.Что я здесь делаю неправильно / отсутствует?

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Как правило, вы можете использовать функцию готовности одного документа.

В этом случае вы также можете использовать одну функцию click для управления переключателями.Поскольку вы используете триггерные ссылки, вам потребуется способ ссылки на целевой блок, но что-то вроде этого будет работать с дополнительным атрибутом, чтобы получить имя блока.(Вы можете сделать это и с индексами, но для простоты использования я добавил атрибут target-box, который имеет идентификатор нужного поля.)

Я также добавил тот же box class для обоих div, вы можете удалить отдельные box1/box2 классы, так как у вас есть идентификаторы, которые уже обрабатывают различия.

Я также добавил класс toggle к ссылкам, чтобы дать им более семантический селектори удалил ненужные дубликаты «открыть / закрыть» (поскольку toggle предназначен для обработки обоих) 

jQuery(document).ready(function($){
  $('.toggle').on('click', function(){
    var targetBox = $(this).attr('target-box'); // Find the target box
    
    $('.box').not(targetBox).hide(1000); // Hide all other boxes
    
    $(targetBox).toggle(1000); // Toggle the current state of this one
  });
});
.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id="box1">
    This is Box 1
  </div>

  <div class="box box2" id="box2">
    This is Box 2
  </div>
</div>

<a href="#" class="toggle" target-box="#box1">Toggle Box1</a>
<a href="#" class="toggle" target-box="#box2">Toggle Box2</a>
0 голосов
/ 15 мая 2018

Нечто подобное может помочь вам. Вы можете скрыть все элементы, отмеченные каким-либо образом, например, все элементы класса. В этом фрагменте я добавил класс «box» для всех блоков, а при открытии сначала скрываю все блоки таким образом, прежде чем показывать указанный блок.

Теперь нажатие open откроет указанное поле и закроет все остальные, а нажатие close закроет указанное поле. 

$(document).ready(function() {
  $("#button1").click(function() {
    $(".box").hide(1000);
    $("#box1").show(1000);
  });
  $("#buttonclose").click(function() {
    $("#box1").hide(1000);
  });
  $("#button2").click(function() {
    $(".box").hide(1000);
    $("#box2").show(1000);
  });
  $("#buttonclose2").click(function() {
    $("#box2").hide(1000);
  });
});
.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id=box1>
    This is Box 1
  </div>

  <div class="box box2" id=box2>
    This is Box 2
  </div>
</div>

<a href="#" id="buttonclose">Close Box1</a>
<a href="#" id="buttonclose2">Close Box2</a>

<a href="#" id="button1">Open Box1</a>
<a href="#" id="button2">Open Box2</a>
...