0

Как скрыть блок информации при клике на другой блок, который должен отобразиться в этом окне? Блоков несколько и нет желания прописывать, например, для блока1 все названия других, чтобы при клике на блок1 скрылся из виду любой из остальных блоков, который на данный момент на экране. пример привожу на части кода из четырех блоков.

function showInfUKMain() {
  $('#UK').toggle();
};

function showInfUKSCO() {
  $('#SCO').toggle();
};

function showInfUKSCOLand() {;
  $('#SCOLand').toggle();
};

function showInfUKWls() {
  $('#Wls').toggle();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <li><img id="icon" src="img/plus.gif" onclick="imgsrcUK(this)">
    <span id=UKMain onclick="showInfUKMain(this)" style="cursor: pointer">Великобритания</span>
    <ul>
      <div id="UKOne">
        <li><img id="icon" src="img/plus.gif" onclick="imgsrcSCO(this)">
          <span id=UKSCO onclick="showInfUKSCO(this)" style="cursor: pointer">Шотландия</span>
          <ul>
            <div id="UKTwoFirst">
              <li>
                <span id=UKSCOLand onclick="showInfUKSCOLand(this)" style="cursor: pointer">Пейзажи</span></li>
            </div>
          </ul>
        </li>
        <div id="UKTwo">
          <li>
            <span id=UKWls onclick="showInfUKWls(this)" style="cursor: pointer">Уэльс</span></li>
        </div>
      </div>
    </ul>
  </li>
</div>

4
  • Задайте отслеживаемым элементам один класс и по нему селектите. А ещё не помешало бы по семантике разобраться (в частности: в ul должны лежать только li, li без родительских ul или ol быть не должны). 14 дек 2017 в 18:02
  • попробуйте для начала почитать простейший туториал по jquery, а потом писать код пытаясь его применять.
    – teran
    14 дек 2017 в 18:11
  • родительский ul есть, просто я его опустила, а в один класс не могу закинуть так, чтобы потом по нажатию выводилась нужная мне информация, у каждого блока информации получается свой класс, точнее id
    – Irina S
    14 дек 2017 в 19:33
  • да, самая хорошая идея сделать через класс, вам нужно просто у каждого блока определить один и тот же класс, и потом прятать все блоки с этим классом. но можно и просто массив сделать и проходить по массиву прятать всё из него, но с классом красивее решение. 14 дек 2017 в 20:26

1 ответ 1

0

Прятать все элементы с тегом tohide а после показывать блок который вас интересует.

function HideAll() {
  var ellements = document.getElementsByClassName("tohide");
  for(var i=0;i<ellements.length;i++) {
     ellements[i].style.display="none";
  }
}
<div class="tohide" style="background-color:orange;">
   div 1 aaa
</div>
<div class="tohide" style="background-color:olive;">
   div 2 bbb
</div>
<div id="id1" class="tohide class2" style="background-color:blue;">
   div 3 ccc
</div>
<br/>
<a href="#" onclick="HideAll()">hide all</a>

Читая комментарии, подумал, что возможно вы не знаете, что у каждого элемента может быть один id и множество классов, и наличае id не мешает быть другим классам. <div id="id1" class="tohide class2".... Я это отразил в примере.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.