Почему не открывает сразу несколько вкладок

vvsh · June 12, 2009

всем хай.

вот весь скрипт.

<html>
<head>
<script>
var timeoutID = 0; var currentHeight = 0;

function dropDwn(elem) {
newelem = document.getElementById(elem);
	if (currentHeight<maxMenuHeight) {
		currentHeight+=5; newelem.style.height = currentHeight.toString()+"px";
	} else {
		window.clearInterval(timeoutID); timeoutID = 0;
	}
}

function dropBack(elem) {
newelem = document.getElementById(elem);
	if (currentHeight>5) {
		currentHeight-=5; newelem.style.height = currentHeight.toString()+"px";
	} else {
		newelem.style.height = "0px";window.clearInterval(timeoutID);timeoutID = 0;currentHeight = 0;
	}
}

function shide(linkobj,myelem,type) {
div = document.getElementById(myelem);
	if(type=='slow') speed = '20';
	if (timeoutID!=0) {window.clearInterval(timeoutID);}
	if(div.style.height=='0px') {
		timeoutID = window.setInterval("dropDwn('"+myelem+"')", speed);
	} else {
		timeoutID = window.setInterval("dropBack('"+myelem+"')",speed);
	}
}
</script>
</head>

<body>
<div onclick="shide(this,'subMenuBlock1','slow');">a</div>
<div id="subMenuBlock1">
<a href="#">1</a><br /><a href="#">2</a>
</div>
<div onclick="shide(this,'subMenuBlock2','slow');">b</div>
<div id="subMenuBlock2">
<a href="#">3</a><br /><a href="#">4</a>
</div>

<script type="text/javascript">
var smb1 = document.getElementById("subMenuBlock1"); var maxMenuHeight = smb1.offsetHeight; smb1.style.height = "0px";
var smb2 = document.getElementById("subMenuBlock2"); var maxMenuHeight = smb2.offsetHeight; smb2.style.height = "0px";
</script>
</body>

почему не получается открыть сразу два элемента вместе?

заранее спасибо

Styx · June 13, 2009

Потому что глобальная переменная currentHeight (текущая высота раскрытого меню) имеется в единственном экземпляре и применяется и к первому открытому диву, а потом и ко второму (причем для второго она уже не отражает действительной высоты). Короче, для правильной работы у каждого дива должна быть своя переменная currentHeight, а не одна на всех. Как это эффективно реализовать — другой вопрос...

vvsh · June 13, 2009

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

Edited June 13, 2009 by vvsh

Styx · June 13, 2009

Вот небольшой примерчик.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Slide menus</title>

   <style type="text/css">
      div.submenu {
         background: #00AA00;
         overflow: hidden;
         width: 200px;
      }
   </style>

   <script type="text/javascript">
      var timeoutID = 0;
      function dropDwn(menuId) {
         var scroll_menu = document.getElementById(menuId);
         if (scroll_menu.offsetHeight < allSubmenus[menuId]) {
            scroll_menu.style.height = (scroll_menu.offsetHeight + 5).toString() + "px";
         } else {
            window.clearInterval(timeoutID);
            timeoutID = 0;
         }
      }   
      function dropBack(menuId) {
         var scroll_menu = document.getElementById(menuId);
         if (scroll_menu.offsetHeight > 5) {
            scroll_menu.style.height = (scroll_menu.offsetHeight - 5).toString() + "px";
         } else {
            scroll_menu.style.height = "0px";
            window.clearInterval(timeoutID);
            timeoutID = 0;
            currentHeight = 0;
         }
      }
      function showhide(menuId) {
         if (timeoutID != 0) {window.clearInterval(timeoutID);}
         if (document.getElementById(menuId).offsetHeight < 1) {
            timeoutID = window.setInterval("dropDwn('" + menuId + "')", 20);
         } else {
            timeoutID = window.setInterval("dropBack('" + menuId + "')", 20);
         }
      }
   </script>

</head>

<body>
   <p><a href="#" onclick="showhide('scrollMenu1');">Expand menu 1</a></p>
   <div class="submenu" id="scrollMenu1">
      <a href="#">Lorem</a><br />
      <a href="#">ipsum</a><br />
      <a href="#">dolor</a><br />
      <a href="#">sit</a><br />
      <a href="#">amet</a>
   </div>
   <p><a href="#" onclick="showhide('scrollMenu2');">Expand menu 2</a></p>
   <div class="submenu" id="scrollMenu2">
      <a href="#">consectetur</a><br />
      <a href="#">adipiscing</a><br />
      <a href="#">elit</a>
   </div>
   <!-- etc. -->

   <script type="text/Javascript">
      var allSubmenus = new Array();
      var allDivs = document.getElementsByTagName("div");
      for (var i = 0; i < allDivs.length; i++) {
         if ((allDivs[i].className == "submenu") && (allDivs[i].id)) {
            allSubmenus[allDivs[i].id] = allDivs[i].offsetHeight;
            allDivs[i].style.height = "0px";
         }
      }
   </script>

</body>

</html>

Всем выезжающим div'ам задаём уникальные идентификаторы (id) и единое имя класса (у меня "submenu"). При загрузке документа составляем массив с ключами, равными id, и значениями, равными полной высоте каждого выезжающего контейнера (высоты ведь могут быть разными из-за различия в содержимом контейнеров). В основном сценарии изменения небольшие. Связаны с тем, что теперь параметры div'ов содержатся не в глобальной переменной, а в массиве. Как сумел — объяснил...

vvsh · June 13, 2009

спасибо огромное, но мог уже не объяснять, я просто точно не знал как на js реализовать так...

Sign In

Почему не открывает сразу несколько вкладок

Question

vvsh

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Styx

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Styx

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information