jQuery Toggle Effekt verursacht Neuladen der Seite

[bertolo]

Hallo Community,

ich möchte den Toggle-Effekt der jQuery-Bibliothek verwenden, um einen Div-Container (CSS-Klasse .buchung) auf- und zuklappen zu können. Allerdings wird jedes Mal wieder die Startseite geladen, wenn ich auf den Auf/Zuklapp-Link klicke, welcher der Event-Auslöser ist (CSS-Klasse .dd_buchung). Ich vermute, dass das mit dem HTML-Link zusammenhängt, wo href="" steht.

Kann mir jemand einen Tipp geben, wie ich das Problem in den Griff bekomme
Vielen Dank!

Hier der Code:

Code: Alles auswählen

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
....
<div><a href="" title="Onlinebuchung" class="dd_buchung"><h1>Onlinebuchung</h1></a>
        <div class="buchung">//  Buchungstool //</div>
</div> 
        
        <script>
          $(document).ready(function () {
                $(".buchung").show();
                $(".dd_buchung").show();
                $('.dd_buchung').click(function(){ $(".buchung").slideToggle(); });
          });
        </script>

[Spider IT]

Hallo bertolo,

href="javascript:void(0)" deaktiviert die Link-Funktion.
Ein z.B. bei onclick eingestelltes Ereignis wird trotzdem ausgeführt.

Gruß
René

[bertolo]

Hallo René,

vielen Dank, das war genau das, was mir geholfen hat:
Ich habe "javascript:void(0)" in den Link eingefügt, der das Toggle-Event auslöst, und der Fehler war weg.

PROBLEM GELÖST.

[Oldperl]

Servus,

alternative hätte man auch eine Methode des event-Objects von jQuery nehmen können, indem man diesen Teil

Code: Alles auswählen

$(document).ready(function () {
    $(".buchung").show();
    $(".dd_buchung").show();
    $('.dd_buchung').click(function(){ $(".buchung").slideToggle(); });
});

folgerndermaßen ergänzt.

Code: Alles auswählen

$(document).ready(function () {
    $(".buchung").show();
    $(".dd_buchung").show();
    $('.dd_buchung').click(function(event){
        event.preventDefault();
        $(".buchung").slideToggle();
    });
});

Gruß aus Franken

Ortwin