Forum PHP.pl > Problem z rozwijanym menu i funkcją onclick

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem z rozwijanym menu i funkcją onclick

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

sianx

25.03.2011, 22:32:21

Witam,
stworzyłem menu, które opiera się o prostą funkcję javascript, jednakże nie działa ono prawidłowo. Mianowicie po otworzeniu strony trzeba kliknąć dwa razy na pole, aby się "rozwinęło"; później skrypt reaguje już na jednokrotne kliknięcie. (dotyczy każdego pola z osobna)
Chciałem także, aby skrypt działał w ten sposób, że po kliknięciu na inne pole niż aktualnie otwarte, owo aktualnie otwarte zamyka się i otwiera się to, na które w danej chwili użytkownik kliknął. Akcję tę miał realizować zapis:

Kod

if(p != "belka_imprezy"){ document.getElementById('belka_imprezy').style.display = "none";
document.getElementById('belka_imprezy_top').style.background = "#00078a";}
        if(p != "belka_wesela"){ document.getElementById('belka_wesela').style.display = "none";
document.getElementById('belka_wesele_top').style.background = "#00078a";}
        if(p != "belka_reklama"){ document.getElementById('belka_reklama').style.display = "none";
document.getElementById('belka_reklama_top').style.background = "#00078a";}
        if(p != "belka_film"){ document.getElementById('belka_film').style.display = "none";
document.getElementById('belka_film_top').style.background = "#00078a";}

Niestety system działa w pełni prawidłowo tylko przy przełączeniu z "Imprezy" na "Wesela".

Próbowałem odnaleźć sedno problemu, ale bezowocnie, zatem proszę o pomoc w analizie.
Załączam grafikę przedstawiającą menu:

oraz kod:

Kod

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

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

<script type="text/javascript">
//<![CDATA[
function rozwin(p,q){
        var akap = document.getElementById(p);
        var cell = document.getElementById(q);


    if(akap.style.display == "none"){
        akap.style.display = "block";
        cell.style.background = "#0009c6";
        if(p != "belka_imprezy"){ document.getElementById('belka_imprezy').style.display = "none";
                                                            document.getElementById('belka_imprezy_top').style.background = "#00078a";}
        if(p != "belka_wesela"){ document.getElementById('belka_wesela').style.display = "none";
                                                        document.getElementById('belka_wesele_top').style.background = "#00078a";}
        if(p != "belka_reklama"){ document.getElementById('belka_reklama').style.display = "none";
                                                            document.getElementById('belka_reklama_top').style.background = "#00078a";}
        if(p != "belka_film"){ document.getElementById('belka_film').style.display = "none";
                                                        document.getElementById('belka_film_top').style.background = "#00078a";}

    } else{
        akap.style.display = "none";
        cell.style.background = "#00078a";
    }

}
//]]>
</script>

</head>

<body>

<table class="naglowek">
    <tr class="gorna_belka">
        <td style="text-align: center;" class="clear_td">00-00-0000</td>
        <td style="text-align: center;" class="clear_td">
        Imieniny</td>
        <td style="text-align: right;" class="uslugi">o nas:</td>

        <td class="title_top" id="belka_imprezy_top"><img src="grafika/bullet.gif" alt="" />
        <a onclick="rozwin('belka_imprezy','belka_imprezy_top')" title="">IMPREZY</a></td>

        <td class="title_top" id="belka_wesela_top"><img src="grafika/bullet.gif" alt="" />
        <a onclick="rozwin('belka_wesela','belka_wesela_top')" title="">WESELA</a></td>

        <td class="title_top" id="belka_reklama_top"><img src="grafika/bullet.gif" alt="" />
        <a onclick="rozwin('belka_reklama','belka_reklama_top')" title="">REKLAMA</a></td>

        <td class="title_top" id="belka_film_top"><img src="grafika/bullet.gif" alt="" />
        <a onclick="rozwin('belka_film','belka_film_top')" title="">FILM</a></td>

        <td><img src="grafika/bullet.gif" alt="" /> LOGOWANIE</td>
    </tr>

    <tr class="srodek_naglowka">
        <td colspan="3" style="vertical-align: middle; text-align: left; padding-top: 10px;">
            LOGO
        </td>
        <td><div id="belka_imprezy" class="rozw_belka">

        <p class="rozw_belka">
        <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> studniówki<br />
        <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> koncerty
        </p>
        </div></td>
        <td><div id="belka_wesela" class="rozw_belka">

        <p class="rozw_belka" style="margin-top: -9px;">
        <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> śluby<br />
        <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> wesela<br />
        <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> chrzciny
        </p>
        </div>
        </td>
        <td><div id="belka_reklama" class="rozw_belka">

        <p class="rozw_belka">
        <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> spoty reklamowe<br />
        </p>
        </div></td>
        <td><div id="belka_film" class="rozw_belka">

        <p class="rozw_belka">
        <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> filmy<br />
        </p>
        </div></td>
        <td class="rozw_belka">

            <form action="pliki/zaloguj.php" method="post">
        <table align="center" style="font-size: 12px;">
        <tr><td><img src="grafika/bullet.gif" class="bullet" alt="" /> login </td><td>
         <input type="text" maxlength="80" name="login" /></td></tr>
         <tr>
        <td><img src="grafika/bullet.gif" alt="" /> hasło </td><td><input type="password" maxlength="80" name="haslo" /></td></tr>
        <tr><td colspan="2">
    <input type="submit" class="button" name="zaloguj" value="» Zaloguj «" /></td></tr>
        </table>
        </form>
        <center><br />
        Nie pamiętasz <a href="" title="">hasła</a>?<br />
        Nie masz konta?<br /> <a href="" title="">Zarejestruj</a> się </center>
        </td>
    </tr>
    </table>


                </body>
                </html>

konole

26.03.2011, 12:12:45

Zostaw javascript i zrób to w CSS.

sianx

28.03.2011, 20:02:21

Ale czy przypadkiem IE nie będzie miał problemów z poprawnym wyświetlaniem tegoż menu [opartego o CSS]?

krzywy36

28.03.2011, 22:22:25

@konole, chętnie posłucham jaki masz pomysł na zrobienie czegokolwiek w css opartego o "dwuklik"

sianx

29.03.2011, 18:58:15

Hmmm... właściwie to "dwuklik" nie jest prawidłowym "odruchem" w powyższym menu. Interesuje mnie reakcja na pojedyncze kliknięcie, chociaż i tak nie wiem, jak wykonać w CSS ową reakcję. Czy tu chodzi o jakieś pseudo klasy?

I oczywiście prosiłbym o odpowiedź na pytanie:

Cytat

Ale czy przypadkiem IE nie będzie miał problemów z poprawnym wyświetlaniem tegoż menu [opartego o CSS]?

lub ewentualnie pomoc w rozwiązaniu problemu z mojego 1. posta.

Dziękuję

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.