Seite reagiert nicht mehr auf javascript

Sundream

Hallo,

mir ist gerade bei meiner Website folgendes Problem aufgefallen: Ich verwende für die mobile Ansicht eine ausklappbare Navigation, die auf allen Seiten gut funktioniert außer auf einer. Diese Seite hat viel anderen Javascript Code, aber ich versteh trotzdem nicht warum es plötzlich nicht mehr funktionieren sollte..

Hier der head Bereich vom Code:

HTML

<head>
    <title>Parasozial</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <script >
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });

    </script>
    <script language="JavaScript" type="text/javascript">
<!--
function toggleDiv(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv2(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv3(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv4(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv5(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv6(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


</head>

Alles anzeigen

Der Teil der nicht mehr funktioniert ist der erste script tag

HTML

<script >
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });

    </script>

Alles anzeigen

Wäre wirklich wirklich dankbar, wenn mir jemand helfen könnte !

Liebe Grüße
Sundream

Arne Drews

Deine 6 toggleDiv Funktionen kannst Du zu einer zusammenfassen, die benötigst Du nicht. Beachte das DRY-Prinzip.
Das language-Attribut im Script-Tag ist deprecated, type reicht vollkommen aus.
Das type-Attribut fehlt in dem ersten Script-Tag komplett.

Das würde ich erstmal bereinigen. Wenn dann noch Fehler sind, F12 im Browser Deiner Wahl und mal auf der Konsole schauen, was ihn stört.
Da steht meistens was drin, wenn's ein JS-Problem gibt.

Gruß Arne

Sundream

Hallo,

dankeschön für die Antwort. Leider kenne ich mich mit JavaScript überhaupt nicht aus... Wie muss ich denn die 6 toggleDiv Funktionen zusammenfassen?

Danke schonmal,

Liebe Grüße !

frankie87

Hey Sundream,

bist du schon weiter gekommen?

Kann dir gerne helfen. Schreib doch mal eine kurze PN sollte das Problem noch bestehen.

BG Frank

Arne Drews

Hallo,

Da Du bereits jQuery integriert hast, gehts relativ einfach.
Ausgehend davon, daß das togglen per Klick passieren soll:

Code

$( 'div' ).click( function(e) {


    e.preventDefault();
    _currDiv = $( this );

    if ( _currDiv.css('display') == 'none' )
        _currDiv.css( 'display', 'block' );
    else
        _currDiv.css( 'display', 'none' );


});

Alles anzeigen

Das geht noch eleganter, wenn man bspw. mit .toggle() oder .show() und .hide() arbeitet, aber grundlegend würde das so gehen.

Gruß Arne

Sundream

Hallo,

danke schonmal, aber wäre das schon auf meinen Code bezogen? Ich versteh wie gesagt garnichts von Javascript... Welche Funktionen müsste ich damit ersetzen? Oder wie müsste ich das umschreiben?

Danke !

Liebe Grüße

Sundream

Arne Drews

Hallo,

die Funktion ersetzt bereits alle Deine toggleDIV-Funktionen!
Dürfte ohne Anpassung laufen, sofern wie gesagt das togglen auf Klick passieren soll.

Für Anpassungsvorschläge sind allerdings mehr Infos erforderlich.

Sundream

Hallo,

damit funktioniert es leider nicht... Beim Klick passiert nichts...
Welche Infos würdest du denn noch brauchen ?

Liebe Grüße

- - - Aktualisiert - - -

Habe den Fehler gefunden... es haben zwei Klammern gefehlt Danke an alle !!!

Tags