0

есть меню открытия окон

<div class="meny">
    <button  onClick="document.getElementById('hide1').style.display='none';document.getElementById('hide2').style.display='none'; 
document.getElementById('hide3').style.display='none'; collapsElement('hide')">ОКНО1</button> 

<button  onClick="document.getElementById('hide').style.display='none';document.getElementById('hide2').style.display='none';
document.getElementById('hide3').style.display='none';collapsElement('hide1')">ОКНО2</button>

<button onClick="document.getElementById('hide').style.display='none';document.getElementById('hide1').style.display='none';
document.getElementById('hide3').style.display='none';collapsElement('hide2')">ОКНО3</button>

<button onClick="document.getElementById('hide').style.display='none';document.getElementById('hide1').style.display='none';
document.getElementById('hide2').style.display='none';collapsElement('hide3')">ОКНО4</button>

и так далее
  </div>

можно ли это как то сделать попроще

0

4 ответа 4

0

Можно так написать. А вообще "проще" - слова размытое.

    <script>
            var arr = ['hide', 'hide1', 'hide2', 'hide3']
        function collapsElementId(id){
            for(var i=0; i<arr.length; i++) {
                if (i!=id) document.getElementById(arr[i]).style.display='none';
            }
            collapsElement(arr[id]);
        }
    </script>

    <div class="meny">
        <button  onClick="collapsElementId(0);>ОКНО1</button> 
        <button  onClick="collapsElementId(1);>ОКНО2</button> 
        <button  onClick="collapsElementId(2);>ОКНО3</button> 
        <button  onClick="collapsElementId(3);>ОКНО4</button> 
и так далее
    </div>
0

$("button").click(function(){
  var bid = $(this).attr("id");
  $(".forhide").hide();
  var nid = bid.replace("btn", "");
  $("#wnd" + nid).show();
});
.forhide {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="btn1">ОКНО1</button> 
<button id="btn2">ОКНО2</button>
<button id="btn3">ОКНО3</button>
<button id="btn4">ОКНО4</button>
</div>
<div id="wnd1" class="forhide">1</div>
<div id="wnd2" class="forhide">2</div>
<div id="wnd3" class="forhide">3</div>
<div id="wnd4" class="forhide">4</div>

0

Ответ похож на ответ @DanIrkutskiy, но смысл в том, что в функцию передаем не индекс, а имя идентификатора. Добавим класс 'hide' к элементам, которые будем скрывать и отображать, это для удобства, чтобы получить все элементы через getElementsByClassName. Если исходить из ваших условий и немного дополнить их, то так:

function myFunc(id) {
  hideElements = document.getElementsByClassName('hide');

  for (var index = 0; index < hideElements.length; index++) {
    if (hideElements[index].id !== id) {
      hideElements[index].style.display = 'none';
    } else {
      collapsElement(id);
    }
  }
}

function collapsElement(id) {
  document.getElementById(id).style.display = 'block'; // для наглядности
}
.hide {}
<div class="meny">
  <div id="hide" class="hide">0</div>
  <div id="hide1" class="hide">1</div>
  <div id="hide2" class="hide">2</div>
  <div id="hide3" class="hide">3</div>

  <button onClick="myFunc('hide');">Window 0</button>
  <button onClick="myFunc('hide1');">Window 1</button>
  <button onClick="myFunc('hide2');">Window 2</button>
  <button onClick="myFunc('hide3');">Window 3</button>
</div>

0

Спасибо Всем вот что получилось в итоге:

function collapsElement(hide_id) {
  var el = document.getElementById(hide_id);
  if (el.style.display != "none") {
    el.style.display = 'none';

  } else {
    el.style.display = '';

  }
}

function hideElements(hide_id) {
  var hides = ['hide', 'hide1', 'hide2', 'hide3', 'hide4'];
  for (var i = 0; i < hides.length; i++) {
    if (hide_id !== hides[i]) {
      document.getElementById(hides[i]).style.display = 'none';
    }
  }
  collapsElement(hide_id);
}
.zet {
  margin: 0 auto;
  position: relative;
  height: auto;
  width: 100%;
  text-align: center;
}

.div {
  background-color: #ff5a00;
  margin: 0 auto;
  position: relative;
  overflow: auto;
  height: 500;
  width: 300;
  border: 1px solid black;
  border-radius: 12px;
}

.div1 {
  background-color: #ff5a00;
  margin: 0 auto;
  position: relative;
  overflow: auto;
  height: 400;
  width: 400;
  border: 1px solid black;
  border-radius: 12px;
}

.div2 {
  background-color: #ff5a00;
  margin: 0 auto;
  position: relative;
  overflow: auto;
  height: 300;
  width: 500;
  border: 1px solid black;
  border-radius: 12px;
}

.div3 {
  background-color: #ff5a00;
  margin: 0 auto;
  position: relative;
  overflow: auto;
  height: 200;
  width: 600;
  border: 1px solid black;
  border-radius: 12px;
}

.div4 {
  background-color: #ff5a00;
  margin: 0 auto;
  position: relative;
  overflow: auto;
  height: 100;
  width: 700;
  border: 1px solid black;
  border-radius: 12px;
}

.meny {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  height: 20px;
  width: auto;
  border: 0px solid black;
  border-radius: 12px;
  background-color: #3333FF;
}

.close{
position:  absolute; top:0; right:0;  font-weight:bold; cursor:pointer; padding:6px 8px; 
}
<div class="meny">
  <button onClick="hideElements('hide')">ОКНО1</button>
  <button onClick="hideElements('hide1')">ОКНО2</button>
  <button onClick="hideElements('hide2')">ОКНО3</button>
  <button onClick="hideElements('hide3')">ОКНО4</button>
  <button onClick="hideElements('hide4')">ОКНО5</button>
</div>


<div class="zet">
  <div id="hide" style="display:none" class="div">
    <span class="close" onclick="hideElements('hide')">X</span> Скрытый текст<br>Скрытый текст
  </div>
  <div id="hide1" style="display:none" class="div1">
    <span class="close" onclick="hideElements('hide1')">X</span> текст<br>
текст
  </div>
  <div id="hide2" style="display:none" class="div2">
    <span class="close" onclick="hideElements('hide2')">X</span> текст +<br>текст +
  </div>
  <div id="hide3" style="display:none" class="div3">
    <span class="close" onclick="hideElements('hide3')">X</span> текст + +<br>текст + +
  </div>
  <div id="hide4" style="display:none" class="div4">
  <span class="close" onclick="hideElements('hide4')">X</span> текст + + +<br>текст + + +
  </div>
</div>

1
  • Здравствуйте! Повторяется (class="close") как сделать его уникальным для страницы
    – игорь
    9 мая 2017 в 15:24

Ваш ответ

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

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