Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Problem z wyświetlaniem elementów
Forum PHP.pl > Forum > Przedszkole
worek
Zrobiłem sobie menu w liście. Struktura menu wygląda tak:
CODE
<ul>
<li></li><li></li>........
<ul>
<li></li><li></li>
</ul>


Napisałem sobie skrypcik żeby po najechaniu na hiperłącze wyświetlił podkategorie znaczy się drugi poziom listy. Dla testów zrobiłem display:block; dla drugiego poziomu listy. I pozamieniałem miejscami w skrypcie gdzie block i none. Ukrywać elementy chciało. Ale jak zrobiłem z powrotem czyli tak jak teraz mam to nie chce pokazywać ukrytych elementów. Gdzie leży problem?

link ma taką testową składnię: <a href="#" onmouseover="return rozwin(this)" onmouseout="return pokaz(this)">

CODE
<script type="text/javascript">
<!--
function rozwin(obj)
{
obj.parentNode.nextSibling.style.display='block';
obj.parentNode.parentNode.nextSibling.style.display='block';
return false;
}
function pokaz(obj)
{
obj.parentNode.nextSibling.style.display='none';
obj.parentNode.parentNode.nextSibling.style.display='none';
return false;
}
//-->
</script>
gargamel
nie pisze się onmouseover="return rozwin(this)" tylko onmouseover="rozwin(this)"
Te returny są tam nie potrzebne.
wookieb
Naucz się używac bbcode albo kolejne twoje tematy zostaną usunięte.
pablo_83
poszukaj sobie rozwiązań bazujących na jQuery jest łatwiejsze do napisania i daje więcej mozliwości, masz tutaj dwa przykłady, które całkiem spoko się prezentują a tobie chyba o coś takiego chodzi:

1 przyklad
2 przykład
worek
Już napisałem trochę menu tylko że jeden problem mam. jak najadę na jedną z podkategorii menu i dłużej potrzymam kursor to mi się schowa menu. Kod wykminiony jest straszny ale to pierwszy raz menu od podstaw sam chce zrobić, bez jQuery.

kod odpowiedzialny za generowanie struktury menu wygląda tak:
CODE
<ul>
<?php

echo "<li class=\"buton\"><a class=\"linkmenu\" href=\"#\" onmousemove=\"rozwin(this)\" onfocus=\"rozwin3(obj)\">".$result['cat_name']."</a></li><ul class=\"ulist\">";
$sql = "SELECT * FROM subcategory WHERE id_cat_main = $_GET[id] ORDER BY id ASC;";
$query = mysql_query($sql,$polaczenie);
while($result = mysql_fetch_array($query))
{
echo "<li class=\"bt\" onfocus=\"rozwin3(this)\" onmousemove=\"rozwin2(this)\"><a class=\"linkmenu2\" href=\"#\" onmousemove=\"rozwin2(this)\" onmouseout=\"pokaz2(this)\" onfocus=\"rozwin2(this)\">$result[cat_name]</a></li>";
}
?>
</ul>
</ul>


skrypt jS:
CODE
<script type="text/javascript">
<!--
var uchwyt;
function rozwin(obj)
{
uchwyt = 3;
obj.parentNode.nextSibling.style.display='block';
return false;
}
function rozwin2(obj)
{uchwyt = 3;
obj.parentNode.style.display='block';
return false;}

function pokaz2(obj)
{
uchwyt--;
if (uchwyt > 0)
{
setTimeout(function(){pokaz2(obj);}, 1000);
}
else
{
obj.parentNode.parentNode.style.display='none';
uchwyt = 3;
return false;
}
}
function rozwin3(obj)
{uchwyt=3;
return false;}
//-->
</script>


style dla przycisków menu:

CODE
.ulist{display:none;}
.linkmenu{
display:block;
top:-3px;
text-decoration:none;
font-size:16px;
text-align:center;
color:#be3f03;
list-style-type:none;
list-style:none;
width:180px;
position:relative;
height:30px;
padding:0px;
margin-top:8px;
margin-bottom:0px;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
.linkmenu:hover{
display:block;
top:-3px;
text-decoration:none;
font-size:16px;
text-align:center;
color:#be3f03;
list-style-type:none;
list-style:none;
width:180px;
position:relative;
height:30px;
padding:0px;
margin-top:8px;
margin-bottom:10px;
text-shadow: 1px 1px 2px #292622;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
.linkmenu2{
display:block;
top:-4px;
text-decoration:none;
font-size:12px;
font-weight:bold;
text-align:center;
border:1px;
color:#be3f03;
list-style-type:none;
list-style:none;
width:150px;
position:relative;
height:25px;
padding:0px;
margin-top:8px;
margin-bottom:10px;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
.linkmenu2:hover{
top:-3px;
text-decoration:none;
font-size:12px;
font-weight:bold;
text-align:center;
border:1px;
color:#be3f03;
list-style-type:none;
list-style:none;
width:150px;
position:relative;
height:25px;
padding:0px;
margin-top:8px;
margin-bottom:10px;
text-shadow: 1px 1px 2px #292622;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
li.bt
{
z-index:3;
top:-6px;
font-size:14px;
text-align:center;
border:1px;
border-color:#ff8400;
border-style:solid;
color:#be3f03;
left:-20px;
list-style-type:none;
list-style:none;
width:150px;
position:static;
height:25px;
padding:0px;
margin-top:0px;
margin-bottom:3px;
text-decoration:none;
-webkit-border-top-left-radius: px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: px;
-moz-border-radius-topleft: px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: px;
border-top-left-radius: px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: px;
webkit-box-shadow: 0px 0px 5px #ff8400;
-moz-box-shadow: 0px 0px 5px #ff8400;
box-shadow: 0px 0px 5px #ff8400;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
background: url(/mvp/pictures/btmnyl.png) repeat-x;
display:block;
z-index:100;
}
li.bt:hover
{
z-index:3;
top:-6px;
font-size:14px;
text-align:center;
border:1px;
border-color:#ff8400;
border-style:solid;
color:#be3f03;
left:-45px;
list-style-type:none;
list-style:none;
width:150px;
position:relative;
height:25px;
padding:0px;
margin-top:0px;
margin-bottom:0px;
text-decoration:none;
-webkit-border-top-left-radius: px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: px;
-moz-border-radius-topleft: px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: px;
border-top-left-radius: px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: px;
webkit-box-shadow: 0px 0px 5px #ff8400;
-moz-box-shadow: 0px 0px 5px #ff8400;
box-shadow: 0px 0px 5px #ff8400;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
background: url(/mvp/pictures/btmnyl.png) repeat-x;
display:block;
z-index:100;
}
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.