IMHO.WS - Javascript требуется небольшая коррекция

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

- - Javascript требуется небольшая коррекция (https://www.imho.ws/showthread.php?t=133986)

Javascript требуется небольшая коррекция

заранее прошу прощение за портянку кода.

в следующем шаблоне генерится раскрывающееся меню.
все пункты меню свернуты, за исключением текущего пункта

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

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

Код:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<div id="categoryTree" class="globalModule">

  <h3>{$lang.dwb_category}</h3>

  <!-- {foreach from=$categories item=cat} -->

  <div class="toggleblock">

    <h4 class="toggletitle"><!-- {if $cat.children} --><span>{if $cat.menuexp==1}<img src="../images/icon_list_down.gif" alt="-" />{else}<img src="../images/icon_list_up.gif" alt="+"  />{/if}</span><!-- {/if} --><a href="{$cat.url}">{$cat.name|escape:html}</a></h4>

    <!-- {if $cat.children} -->

    <ul {if $cat.menuexp==1}{else}style="display:none;"{/if} >

      <!-- {foreach from=$cat.children item=child} -->

      <li><a href="{$child.url}">{$child.name|escape:html}</a></li>

      <!-- {/foreach} -->

    </ul>

    <!-- {/if} -->

  </div>

  <!-- {/foreach} -->

</div>

<script type="text/javascript">

//<![CDATA[

  function getElementsByClassName(id,cls){

    var o=document.getElementById(id);

    var aelem=[],

    oaelem=o.getElementsByTagName("*");

    for(var i=0;i<oaelem.length;i++){

      if (oaelem[i].className==cls ){

        aelem[aelem.length]=oaelem[i];

      }

    }

    return aelem;

  }

  function slideshow(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "";

    obj.innerHTML = "<img src='../images/icon_list_down.gif' alt='-' />";

    obj.onclick = new Function("slidehidden(this)");

  }

  function slidehidden(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "none";

    obj.innerHTML = "<img src='../images/icon_list_up.gif' alt='+' />";

    obj.onclick = new Function("slideshow(this)");

  }

  var a=getElementsByClassName("categoryTree","toggleblock");

  for(var n=0;n<a.length;n++){

    var olink=a[n].getElementsByTagName("h4")[0].firstChild;

  olink.onclick = new Function("slideshow(this)");

  }

//]]>

</script>

Было бы проще, если бы можно было видеть этот скрипт в действии, а то такая билеберда у меня не канает..
Потом var aelem[], стоит как видишь запятая вместо семиколона ;
Потом советую через eval заносить onclick события, а то с ие такие траблы могут быть.
obj.onclick = new Function("slidehidden(this)");
на
eval("obj.onclick=function() { slidehidden(this); }");
типа этого в общем.. у меня так по крайней мере везде совместимо.

вот пример. на иконку "минус" приходится жать дважды

ссылка

Даже не вдаваясь особо в подробности, на минус приходится жать дважды, потому что тот уже раскрыт и получает, как и картинки-плюс одну и ту же функцию slideshow(this). В таком случае надо, чтобы была дополнительная проверка, какая картинка актуально загружена и по ней присваивать функции..

добавлено через 20 минут
Вот, самое простое решение.

Код:

<script type="text/javascript">

//<![CDATA[

  function getElementsByClassName(id,cls){

    var o=document.getElementById(id);

    var aelem=[];

    oaelem=o.getElementsByTagName("*");

    for(var i=0;i<oaelem.length;i++){

      if (oaelem[i].className==cls ){

        aelem[aelem.length]=oaelem[i];

      }

    }

    return aelem;

  }

  function slideshow(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "";

    obj.innerHTML = "<img src='icon_list_down.gif' alt='-' />";

    obj.onclick = new Function("slidehidden(this)");

  }

  function slidehidden(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "none";

    obj.innerHTML = "<img src='icon_list_up.gif' alt='+' />";

    obj.onclick = new Function("slideshow(this)");

  }

function test(testvar) {

if(testvar.parentNode.parentNode.getElementsByTagName("ul")[0].style.display=="none") { slideshow(testvar); }

else { slidehidden(testvar); }

}



  var a=getElementsByClassName("categoryTree","toggleblock");

  for(var n=0;n<a.length;n++){

    var olink=a[n].getElementsByTagName("h4")[0].firstChild;

  olink.onclick = new Function("test(this)");

  }

//]]>

</script>

Viro_man, выручил! мега респект и уважуха! :молись::молись::молись:

спасибо!!! добавил репу.

Да пожалуйста, только я сейчас подумал, а зачем гонять лишний раз циклы проверки, ведь лучше сделать всё сразу при загрузке страницы, что и сделал и так даже быстрее..

Код:

<script type="text/javascript">

//<![CDATA[

  function getElementsByClassName(id,cls){

    var o=document.getElementById(id);

    var aelem=[];

    oaelem=o.getElementsByTagName("*");

    for(var i=0;i<oaelem.length;i++){

      if (oaelem[i].className==cls ){

        aelem[aelem.length]=oaelem[i];

      }

    }

    return aelem;

  }

  function slideshow(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "";

    obj.innerHTML = "<img src='icon_list_down.gif' alt='-' />";

    obj.onclick = new Function("slidehidden(this)");

  }

  function slidehidden(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "none";

    obj.innerHTML = "<img src='icon_list_up.gif' alt='+' />";

    obj.onclick = new Function("slideshow(this)");

  }

  var a=getElementsByClassName("categoryTree","toggleblock");

  for(var n=0;n<a.length;n++){

    var olink=a[n].getElementsByTagName("h4")[0].firstChild;

  olink.onclick = new Function("test(this)");

        if(olink.parentNode.parentNode.getElementsByTagName("ul")[0].style.display=='none') { olink.onclick = new Function("slideshow(this)"); } else { olink.onclick = new Function("slidehidden(this)"); }

  }

//]]>

</script>

второй вариант не работает. картинки пропадают и javascript ошибки выдает.

в первом варианте в случае если категория уже открыта происходит ошибка при ее сворачивании :(

Код:

obj.parentNode.parentNode.getElementsByTagName("ul")[0] is undefined

slidehidden(img icon_list_down.gif)category...php?id=13 (line 256)

onclick(click clientX=327, clientY=305)category...yRg%3D%3D (line 2)

[Break on this error] obj.parentNode.parentNode.getElement...TagName("ul")[0].style.display = "none";

Это такое дело, где любой подгон необходимо делать по новому именно с той разработкой, которая актуальна. А второй у меня работает отлично на том примере, что был дан и от первого не отличается. Загвоздка скорее всего в вашей новой версии сайта, где пытаетесь меню выстроить не по тому образцу примера. А тут естественно всё по новому делать надо.
PS: самая первая ошибка новичков, полагать, что если те сунут яваскрипт в начало страницы, то яваскрипт будет знать, что ему искать. Так вот qwebec, ваша ошибка в том, что код инициализации должен быть либо в конце страницы, либо в начале ввиде онлоад функции, чего в данном случае нет, так что перведите код вниз страницы и всё должно получиться со вторым вариантом.

Viro_man, логично. тогда лучше все таки отладить сначала на приведенном примере.

Firefox на второй вариант не ругается, а вот IE ругается при попытке свернуть изначально открытую категорию

Error Message: 'parentNode.parentNode.getElementsByTagName(...).0.style' is null or not an object

пример, здесь второй вариант javascript кода размещен в самом низу страницы :help:

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

Код:

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

<head>

  <link href="style.css" rel="stylesheet" type="text/css" />

  <title>Ледовые коньки Спортивные товары Демо ECSHOPRU </title>

<body>

<table width=200><tr><td>

<div id="categoryTree" class="globalModule">

  <h3>Категории</h3>

    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=22">Вело/электромобили</a></h4>

        <ul style="display:none;" >

            <li><a href="category.php?id=30">Электромобили</a></li>

            <li><a href="category.php?id=31">Веломобили</a></li>

            <li><a href="category.php?id=183">Каталки</a></li>

          </ul>



      </div>

    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=15">Велосипеды</a></h4>

        <ul style="display:none;" >

            <li><a href="category.php?id=72">Extreme</a></li>

            <li><a href="category.php?id=102">Senator</a></li>

            <li><a href="category.php?id=34">Трехколесные</a></li>



            <li><a href="category.php?id=71">Stels</a></li>

            <li><a href="category.php?id=264">Детские - 12</a></li>

            <li><a href="category.php?id=265">Детские - 14</a></li>

            <li><a href="category.php?id=73">Горные (MTB)</a></li>

            <li><a href="category.php?id=75">Дорожные</a></li>

            <li><a href="category.php?id=76">Складные</a></li>



          </ul>

      </div>

    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=6">Детские коляски</a></h4>

        <ul style="display:none;" >

            <li><a href="category.php?id=13">Chipolino (Болгария)</a></li>

          </ul>

      </div>



    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=7">Мягкие игрушки</a></h4>

        <ul style="display:none;" >

            <li><a href="category.php?id=25">Rabbit,  Беларусь</a></li>

            <li><a href="category.php?id=26">Алиса, Россия</a></li>

          </ul>

      </div>



    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_down.gif" alt="-" /></span><a href="category.php?id=90">Спортивные товары</a></h4>

        <ul  >

            <li><a href="category.php?id=93">Ледовые коньки</a></li>

            <li><a href="category.php?id=95">Роликовые коньки</a></li>

            <li><a href="category.php?id=97">Скейтборды и аксессуары</a></li>

            <li><a href="category.php?id=99">Хоккейная экипировка</a></li>



            <li><a href="category.php?id=14">Мячи и надувные игрушки</a></li>

            <li><a href="category.php?id=28">Самокаты</a></li>

            <li><a href="category.php?id=91">Роликовые аксессуары</a></li>

          </ul>

      </div>

    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=8">Машинки</a></h4>



        <ul style="display:none;" >

            <li><a href="category.php?id=109">Welly</a></li>

            <li><a href="category.php?id=181">ПП Полесье</a></li>

          </ul>

      </div>

    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=4">Куклы</a></h4>



        <ul style="display:none;" >

            <li><a href="category.php?id=257">Весна</a></li>

            <li><a href="category.php?id=263">Barbie</a></li>

            <li><a href="category.php?id=168">Игровые комплексы</a></li>

            <li><a href="category.php?id=248">Bratz</a></li>

          </ul>

      </div>



    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=9">Настольные игры</a></h4>

        <ul style="display:none;" >

            <li><a href="category.php?id=105">Sport Toys, Омск</a></li>

          </ul>

      </div>

    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=3">Конструкторы</a></h4>



        <ul style="display:none;" >

            <li><a href="category.php?id=77">Stellar, Россия</a></li>

            <li><a href="category.php?id=78">Томь-сервис (Томск)</a></li>

            <li><a href="category.php?id=103">Престиж-Игрушка</a></li>

            <li><a href="category.php?id=266">1TOY, Канада</a></li>

            <li><a href="category.php?id=182">ПП Полесье</a></li>



          </ul>

      </div>

    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=186">Для малышей</a></h4>

        <ul style="display:none;" >

            <li><a href="category.php?id=187">ПП Полесье</a></li>

          </ul>

      </div>



    <div class="toggleblock">

    <h4 class="toggletitle"><span><img src="icon_list_up.gif" alt="+"  /></span><a href="category.php?id=11">Сезонные товары</a></h4>

        <ul style="display:none;" >

            <li><a href="category.php?id=106">Зимние</a></li>

            <li><a href="category.php?id=160">Летние</a></li>

          </ul>

      </div>

 

  </div>

</td></tr></table>

<script type="text/javascript">

//<![CDATA[

  function getElementsByClassName(id,cls){

    var o=document.getElementById(id);

    var aelem=[];

    oaelem=o.getElementsByTagName("*");

    for(var i=0;i<oaelem.length;i++){

      if (oaelem[i].className==cls ){

        aelem[aelem.length]=oaelem[i];

      }

    }

    return aelem;

  }

  function slideshow(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "";

    obj.innerHTML = "<img src='icon_list_down.gif' alt='-' />";

    obj.onclick = new Function("slidehidden(this)");

  }

  function slidehidden(obj){

    obj.parentNode.parentNode.getElementsByTagName("ul")[0].style.display = "none";

    obj.innerHTML = "<img src='icon_list_up.gif' alt='+' />";

    obj.onclick = new Function("slideshow(this)");

  }

  var a=getElementsByClassName("categoryTree","toggleblock");

  for(var n=0;n<a.length;n++){

    var olink=a[n].getElementsByTagName("h4")[0].firstChild;

        if(olink.parentNode.parentNode.getElementsByTagName("ul")[0].style.display=='none') { olink.onclick = new Function("slideshow(this)"); } 

        else { olink.onclick = new Function("slidehidden(this)"); }

  }

//]]>

</script>

</body>

</html>