Drop down navigācijas 2 līmeņa platuma uzstādīšana

[WHOAMi]

Sveiki.

Tikko uzstādīju jaunu Wordpress motīvu un sāku ņemties ar navigāciju. Šoreiz kļūda nav sakarā ar WP, bet gan tieši ar navigāciju.

Tātad mēģinu 2 līmeņa drop down elementiem ar jQuery palīdzību visiem pievienot platumu, kura vērtība ir tāda pati, kā šo 2 līmeņa elementu lielākais platums. Attiecīgi:

1. Atrodu platāko li
   
2. Paņemu tā platumu
   
3. Pievienoju visiem tā līmeņa elementiem šo platumu
   

 

 

 

 

 

 

 

 

 

Problēma ir tāda, ka izmantojot zemāk redzamo kodu, man sanāk pievienot style atribūtu, kam "vajadzētu" saturēt šo te maxWidth, bet tā vietā rādās 0px. Mēģināju testa pēc pievienot visiem 2 līmeņa UL elementiem, un tad tiešām pievienojas, piemēram, 142px platums visiem tā līmeņa UL elementiem, tā kā starp tiem lielākais platums ir šie te 142 pikseļi.

Jau iepriekš paldies!

 

Re: HTML

<ul>
  <li class="page_item page-item-2"><a href="">Sākumlapa</a></li>
  <li class="page_item page-item-4"><a href="">Par mums</a>
 	<ul class="children">
       <li class="page_item page-item-6"><a href="">Galerija</a></li>
  </ul>
</li>
</ul>

 

Re: JQuery

                       $(document).ready(function() {
                           var maxWidth = 0;
                           var elemWidth = 0;
                           $('.children li').each(function() {
                               elemWidth = parseInt($(this).css('width'));
                               if (parseInt($(this).css('width')) > maxWidth) {
                                   maxWidth = elemWidth;
                               }
                           });
                           $('.children li').each(function() {
                               $(this).css('width', maxWidth + "px");
                           });
                       });

 

 

Un lūk Copy&Paste kods, kuru izvada pārlūkā, kad viss ir ģenerējies (izvadās 0px nevis nepeiciešamais platums):

<ul>
  <li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2">Sākumlapa</a></li>
  <li class="page_item page-item-4"><a href="http://localhost/wordpress/?page_id=4">Par mums</a>
 	<ul class="children">
	<li class="page_item page-item-6" style="width: 0px;"><a href="http://localhost/wordpress/?page_id=6">Galerija</a></li>
 	</ul>
  </li>
</ul>

 

 

[edited]

Iemesls, šķiet ir CSS, kur es definēju 2 līmeņa (.children) ul elementa pozīciju - absolūtu un noslēpu to ar display:none (lai varētu izveidot hover effektu 1 līmeņa elementiem). Bet kā lai atrisina, šo nespēju pat iedomāties, tā kā man vajag absolute un display:none parametrus, un arī šo te maxWidth stilu. :/

Edited June 21, 2012 by WHOAMi

[WHOAMi]

Atrisināts. http://jsfiddle.net/gzzxw/1/