Comment agir sur le premier ul

Version imprimable

Bonjour à tous,

J'ai recupérer un code qui me permets de dérouler mes sous menu.

Ce code me plait, mais j'aimerais avoir l'option que les sous-menu se deroule orizotalement.

Je ne peux le faire que verticalement

Alors j'essaye de modifier le code.

Je mettrai le code complet qui n'est pas enorme.

Je pesne que je dois agir sur cette partie
Code:

1 2 3 4 5 6 7 8 9 10 $this.hover(function () { if(settings.instantlyCloseOthers === true) $allDropdowns.removeClass('open'); window.clearTimeout(timeout); $parent.addClass('open'); //$this.css('border','3px solid #ff22ff') $this.trigger(showEvent); });
A savoir que la class open s'ajoute sur le li qui le parent du ul que je soihaite qui s'affiche sur sa droite, et se deploie verticalement

J'ai ajouter ce qui est en commentaie.
J'aimerais remplacer ceci pour que le ul enfant au li se déploie horizontalement , sur la droite, et juste en bordure du li, au meme niveau. Et que se dernier se deploie verticalement.

Et ainsi de suite, le prochaine sous menu de deploie a droite du li (donc a l'horizontal) et il se deploie verticalement.

Je n'arrive pas deja remplacer ceci
//$this.css('border','3px solid #ff22ff')

J'ai essayl ceci

Code:

$this.find('ul.dropdown-menu').css('background-color','#ff22ff');

Pour qu'il agisse sur le ul enfant au li.

Pourriez-vous me guider?

merci

01/02/2014, 22h38
pierrot10
J'ai partielement trouvé.

Je ne devais pas faire

Code:

$this.find('.dropdown-menu').css("background-color", "red");

mais

Code:

$parent.find('.dropdown-menu').css("background-color", "red");

Le truc maintenant est de le déplacer à droite, à une distance egal à la largeur du li.

Je ne comprends pas pourquoi quand je change ainsi
Code:

1 2 $parent.find('.dropdown-menu').css("position", "absolute"); $parent.find('.dropdown-menu').css("right", "20px");
Il n'y a absolument rien qui se passe.
Il devait au moin se deplacer de 20px, non?

Ben j'ai trouvé, mais suis pas trop confient sur mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
 
  // this helps with button groups!
            $this.hover(function () {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');
 
                window.clearTimeout(timeout);
                $parent.addClass('open');
                $parent.find('.dropdown-menu').css("position", "absolute").css("top","0px").css("left",$parent.width());
                $this.trigger(showEvent);
            });

Voici le code complet de la fonction

Code:

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
78
79
80
 
$.fn.droprightHover = function (options) {
        // don't do anything if touch is supported
        // (plugin causes some issues on mobile)
        if('ontouchstart' in document) return this; // don't want to affect chaining
 
        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());
 
        return this.each(function () {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                showEvent   = 'show.bs.dropdown',
                hideEvent   = 'hide.bs.dropdown',
                // shownEvent  = 'shown.bs.dropdown',
                // hiddenEvent = 'hidden.bs.dropdown',
                settings = $.extend(true, {}, defaults, options, data),
                timeout;
 
            $parent.hover(function (event) {
 
                // so a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    // stop this event, stop executing any code 
                    // in this callback but continue to propagate
                    return true; 
                }
 
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');
 
                window.clearTimeout(timeout);
                $parent.addClass('open');
                $this.trigger(showEvent);
            }, function () {
                timeout = window.setTimeout(function () {
                    $parent.removeClass('open');
                    $this.trigger(hideEvent);
                }, settings.delay);
            });
 
            // this helps with button groups!
            $this.hover(function () {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');
 
                window.clearTimeout(timeout);
                $parent.addClass('open');
                $parent.find('.dropdown-menu').css("position", "absolute").css("top","0px").css("left",$parent.width());
                $this.trigger(showEvent);
            });
 
            // handle submenus
            $parent.find('.dropdown-submenu').each(function (){
                var $this = $(this);
                var subTimeout;
                $this.hover(function () {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();
                    alert("3");
                    // always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function () {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function () {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

Que me diriez-vous pour mieux faire?

02/02/2014, 10h16
NoSmoking

Bonjour,
l'essentiel se passant dans la déclaration du style de la class open, autant utiliser celle ci en modifiant son CSS. Ensuite faire comme c'est fait dans le code initial en ajoutant/supprimant la class open.