Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   улучшить скрипт для древовидного меню (https://javascript.ru/forum/misc/23986-uluchshit-skript-dlya-drevovidnogo-menyu.html)

elenaslobodian 14.12.2011 01:30

улучшить скрипт для древовидного меню
 
В JS мало что понимаю, взяла код для древовидного меню из шаблона:
<SCRIPT LANGUAGE="JavaScript">


function Toggle(node)
{
    // Unfold the branch if it isn't visible
    if (node.nextSibling.style.display == 'none')
    {
        // Change the image (if there is an image)
        if (node.children.length > 0)
        {
            if (node.children.item(0).tagName == "IMG")
            {
                node.children.item(0).src = "minus.gif";
            }
        }

        node.nextSibling.style.display = '';
    }
    // Collapse the branch if it IS visible
    else
    {
        // Change the image (if there is an image)
        if (node.children.length > 0)
        {
            if (node.children.item(0).tagName == "IMG")
            {
                node.children.item(0).src = "plus.gif";
            }
        }

        node.nextSibling.style.display = 'none';
    }

}
</SCRIPT>

Все хорошо работает, но как сделать так, чтобы все пункты при открытии страницы были свернуты?
По возможности не наводку, а конкретно где что исправить.

devote 14.12.2011 02:31

в CSS пропишите стили тем элементам что должны быть закрытыми.
display: none;

elenaslobodian 14.12.2011 14:31

Не совсем понимаю, как это сделать, сама таблица выглядит примерно так:
<TR><TD>
        <TABLE BORDER=1><TR><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif">Wszechświat</A><DIV>
		
          <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Niebo i atmosfera</A><DIV>
			  <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Niebo i ciała niebieskie<DIV>
              </DIV></TD></TR></TABLE>
			  <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif">Pogoda i wiatry<DIV>
              </DIV></TD></TR></TABLE> 
		 </DIV></TD></TR></TABLE>
</DIV></TD></TR></TABLE>

Там, где есть <IMG SRC="plus.gif"> - это главные элементы, все, что после них должно быть закрыто. Прописала им display: none; - они вообще перестали отображаться, даже когда кликаешь на главный элемент.
Или это надо в коде JS чему-то эти стили приписать? А как это примерно тогда должно выглядеть?

ksa 14.12.2011 14:44

Цитата:

Сообщение от elenaslobodian
сама таблица выглядит примерно так

Код времён второй мировой войны... :D Повергает в депрессию. :(

elenaslobodian 14.12.2011 14:56

Так и я не программист, а филолог :) Для меня это новое слово в науке и технике :) Я очень горда собой уже потому, что смогла сама по шаблонам нарисовать страничку для своего словаря, пусть даже используя коды второй мировой войны :)

ksa 14.12.2011 15:00

elenaslobodian, у меня тоже были благодарности от командования за оформление "боевого листка"! :D

Просо твоего огрызка не достаточно для ответа на твой вопрос...

elenaslobodian 14.12.2011 15:22

Не, я не для командования, это мой проект, я - для мировой науки и будущих поколений :D
А таблица длинная. Вот такая:
<div id="menu1">
<TABLE BORDER=1>
    <TR><TD>
        <TABLE BORDER=1><TR><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif">Wszechświat</A><DIV>
		
          <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Niebo i atmosfera</A><DIV>
			  <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Niebo i ciała niebieskie<DIV>
              </DIV></TD></TR></TABLE>
			  <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif">Pogoda i wiatry<DIV>
              </DIV></TD></TR></TABLE> 
		 </DIV></TD></TR></TABLE>
		 
		 
		 <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Ziemia</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Rzeźba terenu<DIV>
            </DIV></TD></TR></TABLE>
            <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Woda</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Wody wewnętrzne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Morza<DIV>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Gleba i jej struktura<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Minerały<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Metale<DIV>
            </DIV></TD></TR></TABLE>
         </DIV></TD></TR></TABLE>
		 

         <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Rośliny</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Świat roślin ogólnie<DIV>
            </DIV></TD></TR></TABLE>
            <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Drzewa</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Informacje ogólne (Drzewa)<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Lasy, drzewa leśne i inne drzewa drewno których wykorzystujemy i t.p.<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Drzewa owocowe</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Informacje ogólne (Drzewa owocowe)<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Drzewa owocowe szczególnie<DIV>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Krzewy i krzewy jagodowe</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Informacje ogólne (Krzewy i krzewy jagodowe)<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Krzewy i krzewy jagodowe z owocami jadalnymi<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Krzewy i krzewy jagodowe z niską wartością pokarmową<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Krzewy i krzewy jagodowe z owocami niejadalnymi<DIV>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Wiechlinowate<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Warzywa<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Pastewne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Rośliny uprawne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Rośliny leśne i łąkowe<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Rośliny wodne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Rośliny ozdobne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Rośliny ogrodowe i pokojowe<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Chwasty<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Grzyby<DIV>
            </DIV></TD></TR></TABLE>
         </DIV></TD></TR></TABLE>

<TABLE BORDER=1 BORDERCOLOR="#375A6E"><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Zwierzęta</A><DIV>
            <TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Czworonogi</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Informacje ogólne (Czworonogi)<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Zwierzęta domowe<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Drobne zwierzęta żyjące w pobliżu człowieka<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Zwierzęta leśne i polne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Zwierzęta żyjące w górach<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Zwierzęta żyjące w pobliżu wody<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Zwierzęta egzotyczne<DIV>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Ptaki</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Informacje ogólne (Ptaki)<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptaki leśne i polne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptaki drapieżne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptactwo łowne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptaki morskie<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptactwo domowe<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptaki tropikalne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptaki okołobiegunowe<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ptaki wodne<DIV>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Zwierzęta morskie<DIV>
            </DIV></TD></TR></TABLE>
			
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Ryby</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Informacje ogólne (Ryby)<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ryby słodkowodne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Ryby morskie<DIV>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE> 
			
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Gady<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Płazy<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Mięczaki<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Skorupiaki, pajęczaki<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="plus.gif"> Owady</A><DIV>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Informacje ogólne (Owady)<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Owady pożyteczne<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Owady szkodniki<DIV>
            </DIV></TD></TR></TABLE>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Choroby zwierząt<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Bajkowe zwierzęta<DIV>
            </DIV></TD></TR></TABLE>
			<TABLE BORDER=1><TR><TD WIDTH=10></TD><TD><IMG SRC="bullet.gif"> Imiona zwierząt<DIV>
            </DIV></TD></TR></TABLE>	 
</DIV></TD></TR></TABLE>		 
		 
      </DIV></TD></TR></TABLE>

  

  </TR></TD>

</TABLE>
</div>

Ну и плюс тот код js в начале
те строчки, где <IMG SRC="plus.gif"> - это главные узлы деревьев, они должны сворачиваться и разворачиваться

ksa 14.12.2011 15:55

Тут пример уже не помещается... Т.ч. смотри вложеный арахив... ;)

elenaslobodian 14.12.2011 19:42

Спасибо:)


Часовой пояс GMT +3, время: 00:15.