• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Doppelt verschachtelte Definitionsliste mit Javascript

D

denschroe

Neues Mitglied
Hallo,
ich habe folgendes Problem. Ich habe eine Definitionsliste erstellt, die mittels Javascript beim Anklicken auf- oder zufährt.
Die HTML-Datei, wie's funktioniert habe ich unter Problem Definitionsliste für euch.

Mein Problem ist, dass beim Anklicken der "Unterkategorie von 2" das Ding zwar auffährt, aber nicht offen bleibt, so dass man die Dritte Ebene sehen kann.
Wie zur Hölle löse ich das? Jemand ne Idee?

besten Gruß und danke.
Hier noch der Code pur.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Problem Definitionsliste</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    if($("#left2spaltigliste")) {
        $("#left2spaltigliste dd").hide();
        $("#left2spaltigliste dt b").click(function() {
            if(this.className.indexOf("clicked") != -1) {
                $(this).parent().next().slideUp(200);
                $(this).removeClass("clicked");
            }
            else {
                $("#left2spaltigliste dt b").removeClass();
                $(this).addClass("clicked");
                $("#left2spaltigliste dd:visible").slideUp(200);
                $(this).parent().next().slideDown(500);
            }
            return false;
        });
    }
});
</script>


</head>


<div id="left_2_spaltig">
        <dl id="left2spaltigliste">
        <dt><b>Kategorie 1</b></dt>
            <dd>
                <ul>
                <li><a id="beispielinhalt1">Beispielinhalt 1</a></li>
                <li><a id="beispielinhalt2">Beispielinhalt 2</a></li>
                <li><a id="beispielinhalt3">Beispielinhalt 3</a></li>
                <li><a id="beispielinhalt4">Beispielinhalt 4</a></li>
                </ul>
            </dd>
            <dt><b>Kategorie 2</b></dt>
            <dd>
                <ul>
                <li><dt><b>Unterkategorie von 2</b></dt>
                    <dd>
                    <ul>
                          <li><a id="beispielinhalt10">Beispielinhalt 10</a></li>
                          <li><a id="beispielinhalt11">Beispielinhalt 11</a></li>
                      </ul>
                    </dd>
                </li>
                <li><a id="beispielinhalt12">Beispielinhalt 10</a></li>
                </ul>
            </dd>
        </dl>
</div>






<body>
</body>
</html>
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Problem Definitionsliste</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $(".accordion dd").hide();
    $(".accordion dt").click(function () {
        if ($(this).hasClass("clicked")) {
            $(this).next("dd").slideUp(200);
            $(this).removeClass("clicked");
        } else {
            $(".accordion dt").removeClass("clicked");
            $(this).addClass("clicked");
            $(".accordion dd:visible").not($(this).parents("dd")).slideUp(200);
            $(this).next().slideDown(500);
        }
        return false;
    });
});
</script>
<style type="text/css">
.accordion dt {
    cursor: pointer;
    font-weight: bold;
}
</style>
</head>



        <dl id="left2spaltigliste" class="accordion">
        <dt>Kategorie 1</dt>
            <dd>
                <ul>
                <li><a id="beispielinhalt1">Beispielinhalt 1</a></li>
                <li><a id="beispielinhalt2">Beispielinhalt 2</a></li>
                <li><a id="beispielinhalt3">Beispielinhalt 3</a></li>
                <li><a id="beispielinhalt4">Beispielinhalt 4</a></li>
                </ul>
            </dd>
            <dt>Kategorie 2</dt>
            <dd>
                <ul>
                <li><dt>Unterkategorie von 2</dt>
                    <dd>
                    <ul>
                          <li><a id="beispielinhalt10">Beispielinhalt 10</a></li>
                          <li><a id="beispielinhalt11">Beispielinhalt 11</a></li>
                      </ul>
                    </dd>
                </li>
                <li><a id="beispielinhalt12">Beispielinhalt 10</a></li>
                </ul>
            </dd>
            <dt>Kategorie 3</dt>
            <dd>
                <ul>
                <li><dt>Unterkategorie von 3</dt>
                    <dd>
                    <ul>
                          <li><a id="beispielinhalt10">Beispielinhalt 10</a></li>
                          <li><a id="beispielinhalt11">Beispielinhalt 11</a></li>
                      </ul>
                    </dd>
                </li>
                <li><a id="beispielinhalt12">Beispielinhalt 10</a></li>
                </ul>
            </dd>
        </dl>






<body>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben