Jquery toggleclass

Bonjour !

Si tu regarde la doc de la fonction .click() tu aura tout ce qu'il te faut je pense. En recopiant l'exemple avec ton id :

$( "#mobnav-btn" ).click(function() {
  alert( "Handler for .click() called." );
});

tu devrait avoir une alerte (tu peux utiliser console.log('texte'); pour le faire apparaître dans la console si tu préfère) quand tu click sur le bouton. Si ca marche alors c'est que ton problème viens du

toggleClass à l'intérieur. La encore, reprend la syntaxe conseillée : 
$( "#mobnav-btn" ).click(function() {
  $( ".sf-menu" ).toggleClass("xactive");
});

Et regarde si la classe s'ajoute bien à l'élément .sf-menu.
Et enfin il faut vérifier si tes CSS collent bien et les priorités entre les sélecteurs (peut etre qu'un display none garde la priorité sur l'apparition...).

pour résumer les ressources le contexte ( point 1 et 2 et 3 )
1) le fichier script.js du site ligne 151 contient le code en question

/* Superfish dropdown menu */

    jQuery('ul.sf-menu').superfish({
        delay: 600,                            // one second delay on mouseout
        speed: 'fast',                          // faster animation speed
        animation: {opacity: 'show', height: 'show'},
        disableHI:  true,
        autoArrows: false                            // disable generation of arrow mark-up
    });

    jQuery('#mobnav-btn').click(
        function () {
            jQuery('.sf-menu').toggleClass("xactive");
        }
    );

    jQuery('.mobnav-subarrow').click(
        function () {
            jQuery(this).parent().toggleClass("xpopdrop");
        }
    );

2) Le fichier superfish.js du site montre l'auteur de superfish Jeol Birch et le projet ( documentation,source , test ...) est sur github

/*
 * jQuery Superfish Menu Plugin
 * Copyright (c) 2013 Joel Birch
*/

3) en regardant comment fonctionne bootstrap ( version ? , pas superfish ) : le principe et d avoir 2 menu ( visuellement) appelons les mobile et desktop qui n'apparaisent pas en même temps ( mediaqueries) . Dans le site actuel, le code des items ( sous menu) sont dans le menu desktop et est réutilisé dans le menu mobile . Donc le script ( javascript ou jquery peu importe) doit pourvoir avoir accès ( handle ? ) au code du menu desktop pour que le menu mobile contiennent des sous menus !! le problème est qu il n y a pas de sous menu dans le menu mobile . Il semble que l'intégrateur web avec bootstrap à le choix d'utiliser n'importe quelle implémentation( code) pour la gestion des menu ( toogle menu) mais en s assurant qu il n y a pas d incompatibilité avec le code javascript/css provenant de bootstrap.



4)Dans votre question ; le mot résolution doit être inadapté/inexacte .......

5) Le code suivant fonctionne en console

$( "#mobnav-btn" ).click(function() {
  alert( "Handler for .click() called." );
});

6) Le code suivant fonctionne en mode console mais pas sur le site !!
Le code css est ok mais javascript ne fonctionne pas !!

 jQuery('.sf-menu').toggleClass("xactive");

jQuery('#mobnav-btn').click(
        function () {
            jQuery('.sf-menu').toggleClass("xactive");
        }
    );

le problème est ailleurs.....
- Dans La "documentation" de superfish ou on peut lire "don't rely on toggleClass".
- dans nav ne manquerait il pas des nom des classes spécifique a bootstrap ?
-la librairie jquery n'est pas chargé lors de l appel de ces fonctions ?
-quelque chose empêche l éxécution du code ( ligne 151) .....Il semble qu 'une erreur dans le script ligne 116 qui empêche l éxecution du code qui suit ( ligne 151 notre menu ) .
===Uncaught TypeError: jQuery(...).smartresize is not a function===
si vous copier le code javascript relatif au menu dans la console "tout fonctionne"



En espérant que cela puisse être utile.


==========NB==========
super design non bootstrap avec comportement bootstrap !!!
merci pour le fichier scss !
( je vais tester un remote debug sur votre site .. )


quel serveur ( apache ?)
quel CMS ( aucun?) ?
je remarque ( a confirmer pour votre site) que dans de nombreux sites; le mode responsive entraine un recentrage des images/ texte inadapté .On perd ainsi l'information (sujet, texte ) de l'image .Il faut redéfinir le contenu des images en fonction du width du navigateur ( mediaqueries) ainsi que les propriétés du texte ( positionnement ....alignement ) . Il me semble que la taille ( height) du banner dépend de la taille ( height) du navigateur ( = écran mobile pour mobile) pour votre site selon ou l on se trouve dans les breakpoints des MediaQueries (original) . Le texte scroll de haut en bas en activant la molette donc pas un problème .

image manquantes

Modifié par 75lionel (14 Jun 2016 - 23:14)