Avatar billede -kenner- Nybegynder
07. januar 2005 - 14:27 Der er 1 kommentar og
1 løsning

Mangler lukkefunktion til menu..

Hej eksperter

Jeg fandt dette script her på Eksperten, og som i kan se så er det en css menu. Men jeg vil gerne have lavet et par ændringer i scriptet.

1. Jeg ville gerne hvis man kunne lukke den åbne drop igen ved at klikke på overskriften. ( men vil selvfølgelig behølde funktionen der gør at der kun kan være en åben af gangen. )

2. Jeg har lagt billederne open.gif og close.gif ind i mappen images, men billederne bliver ikke vist når jeg åbner sitet, men først når jeg har åbent en overskrift, og lukket den igen.

Så hvis mit problem og mit ønske kan blive løst ville jeg blive glad.

På forhånd tak, Kenneth


Har prøvet at lægge billederne i mappe og bruge denne funktion i stedet for:
<script type="text/JavaScript">
        var actMen = false;
        function toggle(elm) {
            var idInx = elm.id.split("head_")[1];
            var tDiv = document.getElementById("text_"+idInx);
            var im = document.getElementById("icn_"+idInx);
            if (actMen) {
                actMen.elm.style.display = "none";
                actMen.im.src = "images/open.gif";
            }
            tDiv.style.display = (tDiv.style.display=="none")? "block" : "none";
            im.src = (im.src.indexOf("open")!=-1)? "images/close.gif" : "images/open.gif";
            actMen = {"elm":tDiv, "im":im};
        }
        </script>


Menu koden:
<HTML>
<HEAD>
    <TITLE> side titel</TITLE>
    <LINK href="indexSheet.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
        <style type="text/css">
        .cont {
            width: 200px;
            font: 11px verdana, arial, sans-serif;
        }
        .cont img {
            vertical-align: middle;
        }
        .cont a {
            font-weight: bold;
            color: #000000;
            text-decoration: none;
        }
        .cont a:visited {
            color: #000000;
            text-decoration: none;
        }
        .cont a:hover {
            color: #aaaaaa;
            text-decoration: none;
        }
        .cont div {
            margin: 5px 0px 5px 20px;
            background-color: #ededed;
            border: 1px dashed #cccccc;
        }
        </style>

        <script type="text/JavaScript">
        var actMen = false;
        function toggle(elm) {
            var idInx = elm.id.split("head_")[1];
            var tDiv = document.getElementById("text_"+idInx);
            var im = document.getElementById("icn_"+idInx);
            if (actMen) {
                actMen.elm.style.display = "none";
                actMen.im.src = "open.gif";
            }
            tDiv.style.display = (tDiv.style.display=="none")? "block" : "none";
            im.src = (im.src.indexOf("open")!=-1)? "close.gif" : "open.gif";
            actMen = {"elm":tDiv, "im":im};
        }
        </script>

        <div class="cont"><img id="icn_1" src="open.gif">
            <a href="#" id="head_1" onclick="toggle(this);return false">1 Overskrift</a>
            <div id="text_1" style="display:none">
            <a href="#">Sub til 1</a><br>
            <a href="#">Sub til 1</a><br>
            <a href="#">Sub til 1</a>
            </div>
        </div>

        <div class="cont"><img id="icn_2" src="open.gif">
            <a href="#" id="head_2" onclick="toggle(this);return false">2 Overskrift</a>
            <div id="text_2" style="display:none">
            <a href="#">Sub til 2</a><br>
            <a href="#">Sub til 2</a>
            </div>
        </div>

    </BODY>
</HTML>
Avatar billede olebole Juniormester
07. januar 2005 - 14:51 #1
<ole>

        <script type="text/JavaScript">
        var actMen = false;
        function toggle(elm) {
            var idInx = elm.id.split("head_")[1];
            var tDiv = document.getElementById("text_"+idInx);
            var im = document.getElementById("icn_"+idInx);
            if (actMen) {
                actMen.elm.style.display = "none";
                actMen.im.src = "open.gif";
                if (actMen.elm==tDiv) {
                    actMen = null;
                    return
                }
            }
            tDiv.style.display = (tDiv.style.display=="none")? "block" : "none";
            im.src = (im.src.indexOf("open")!=-1)? "close.gif" : "open.gif";
            actMen = {"elm":tDiv, "im":im};
        }
        </script>

2: Husk at sætte den korrekte sti i *både* script og img-tags (hint: mappen 'images' i img-tag)  ;o)

/mvh
</bole>
Avatar billede -kenner- Nybegynder
19. januar 2008 - 14:23 #2
hej ole,

Jeg har haft meget glæde af din kode, men jeg kunne rigitg godt tænke mig hvis den kunne udvides til at overskriften også var et link til en side:

<a href="#" id="head_1" onclick="toggle(this);return false">1 Overskrift</a>

Jeg har prøvet at sætte en side ind i stedet for #, men det fungerede ikke rigtig?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester