Discussion :

[JefReb]

Bonjour à tous,
nouveau dans le forum js, et très faible en js, je rencontre un problème avec 2 déclarations de Jquery incompatible apparemment et que je dois faire.

J'ai un menu au clic tactile qui utilise jquery et l'excellent js de Jreaux62

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
// JavaScript Document
// De Jreaux62
// ------------------------------------------------
// 	jquery.dropdown.js	(depends on: jquery.hoverIntent.js)
// ------------------------------------------------
$.fn.dropdown = function(options) {
  var defaults = {};
  var opts = $.extend(defaults, options);
  // Apply class=hasSub on those items with children
  this.each(function() {
    $(this)
      .find("li")
      .each(function() {
        if ($(this).find("ul").length > 0) {
          $(this).addClass("hasSub");
        }
      });
  });
  return this;
};
// ------------------------------------------------
// MENU MAIN
$(function() {
  var navMainId = "#navMain";
  // -------------------
  // Calling the jquery dropdown
  $(navMainId).dropdown();
  // -------------------
  //Sous-Menu ouvert par defaut
  $(navMainId + " ul > li.active").addClass("open");
  $(navMainId + " ul > li.active > ul").slideDown("fast");
  // -------------------
  // ouverture/fermeture sous-menu (click/touch)
  $(navMainId + " ul > li").on("click", function(event) {
    event.stopPropagation(); /* important */
    $(this)
      .parent()
      .find("li:not(:hover)")
      .removeClass("open");
    $(this).toggleClass("open");
    $(this)
      .parent()
      .find("li:not(:hover) ul")
      .slideUp("fast");
    if ($(this).hasClass("hasSub")) {
      $(this)
        .children("ul")
        .slideToggle("fast");
    }
  });
  // -------------------
  // on désactive les liens des Menus AVEC Sous-Menus (obligatoire pour Tablettes TACTILES / Smartphones)
  $(navMainId + " > ul > li.hasSub > a").on("click", function(event) {
    event.preventDefault();
  });
  // -------------------
});
 
// ------------------------------------------------
// Scrollbar si menu plus grand que la hauteur de fenêtre
$(window).on("load resize", function() {
  var navMainId = "#navMain";
  //	$(navMainId).height( Math.min( $(window).height(), $(navMainId).height() ) ); //  A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....
//  $(navMainId).css({ "overflow-y": "auto" });
});
// ------------------------------------------------
// ------------------------------------------------
// De NoSmoKing 
// mettre un « écouteur de click » sur le document et de refermer ce qui est ouvert
$(document).on("click",function() {
    $("#navMain ul > li.open")
        .removeClass("open")
        .children("ul")
            .slideUp("fast")
});

et qui marche nickel.

Puis j'ai été obligé d'utiliser LightBox2 pour une gallery d'images dans quelques une des pages.
mais dans ce cas il faut rajouter

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="/js/lightbox2/js/lightbox-plus-jquery.min.js"></script>

et là c'est la catastrophe. Le menu reste déplié et n'est plus dropdown.
je sais qu'il y a conflit entre les 2 Jquery, mais comment faire autrement.


Un grand merci d'avance