相同的jquery插件在相同的url只工作一个

Same jquery plugin in same url only working one

本文关键字:一个 url jquery 插件 工作      更新时间:2023-09-26

我是jQuery和JavaScript的初学者。基本上我要创建自定义响应菜单与2导航在右边和左边,第一个是工作得很好,但不是与另一个。脚本我从(http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/)。我的脚本是这样的(codependency .io/donlego/full/xGjzWR)

<body>
  <div id="dl-menu" class="dl-menuwrapper"><!-- Codrops top bar --> 
                        <button class="dl-trigger">Open Menu</button>
                        <ul class="dl-menu">
                            <li>
                                <a href="#">Fashion</a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Men</a>
                                    </li>
                                    <li>
                                        <a href="#">Women</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Jackets</a></li>
                                            <li><a href="#">Knits</a></li>
                                            <li><a href="#">Jeans</a></li>
                                            <li><a href="#">Dresses</a></li>
                                            <li><a href="#">Blouses</a></li>
                                            <li><a href="#">T-Shirts</a></li>
                                            <li><a href="#">Underwear</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Children</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Boys</a></li>
                                            <li><a href="#">Girls</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Electronics</a>
                                <ul class="dl-submenu">
                                    <li><a href="#">Camera &amp; Photo</a></li>
                                    <li><a href="#">TV &amp; Home Cinema</a></li>
                                    <li><a href="#">Phones</a></li>
                                    <li><a href="#">PC &amp; Video Games</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Furniture</a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Living Room</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Sofas &amp; Loveseats</a></li>
                                            <li><a href="#">Coffee &amp; Accent Tables</a></li>
                                            <li><a href="#">Chairs &amp; Recliners</a></li>
                                            <li><a href="#">Bookshelves</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Bedroom</a>
                                        <ul class="dl-submenu">
                                            <li>
                                                <a href="#">Beds</a>
                                                <ul class="dl-submenu">
                                                    <li><a href="#">Upholstered Beds</a></li>
                                                    <li><a href="#">Divans</a></li>
                                                    <li><a href="#">Metal Beds</a></li>
                                                    <li><a href="#">Storage Beds</a></li>
                                                    <li><a href="#">Wooden Beds</a></li>
                                                    <li><a href="#">Children's Beds</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Bedroom Sets</a></li>
                                            <li><a href="#">Chests &amp; Dressers</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Home Office</a></li>
                                    <li><a href="#">Dining &amp; Bar</a></li>
                                    <li><a href="#">Patio</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Jewelry &amp; Watches</a>
                                <ul class="dl-submenu">
                                    <li><a href="#">Fine Jewelry</a></li>
                                    <li><a href="#">Fashion Jewelry</a></li>
                                    <li><a href="#">Watches</a></li>
                                    <li>
                                        <a href="#">Wedding Jewelry</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Engagement Rings</a></li>
                                            <li><a href="#">Bridal Sets</a></li>
                                            <li><a href="#">Women's Wedding Bands</a></li>
                                            <li><a href="#">Men's Wedding Bands</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /dl-menuwrapper -->
  <div class="clearfix"></div>
  <div id="dl-menu" class="dl-menuwrapper"><!-- Codrops top bar --> 
                        <button class="dl-trigger">Open Menu</button>
                        <ul class="dl-menu">
                            <li>
                                <a href="#">Fashion</a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Men</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Shirts</a></li>
                                            <li><a href="#">Jackets</a></li>
                                            <li><a href="#">Chinos &amp; Trousers</a></li>
                                            <li><a href="#">Jeans</a></li>
                                            <li><a href="#">T-Shirts</a></li>
                                            <li><a href="#">Underwear</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Women</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Jackets</a></li>
                                            <li><a href="#">Knits</a></li>
                                            <li><a href="#">Jeans</a></li>
                                            <li><a href="#">Dresses</a></li>
                                            <li><a href="#">Blouses</a></li>
                                            <li><a href="#">T-Shirts</a></li>
                                            <li><a href="#">Underwear</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Children</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Boys</a></li>
                                            <li><a href="#">Girls</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Electronics</a>
                                <ul class="dl-submenu">
                                    <li><a href="#">Camera &amp; Photo</a></li>
                                    <li><a href="#">TV &amp; Home Cinema</a></li>
                                    <li><a href="#">Phones</a></li>
                                    <li><a href="#">PC &amp; Video Games</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Furniture</a>
                                <ul class="dl-submenu">
                                    <li>
                                        <a href="#">Living Room</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Sofas &amp; Loveseats</a></li>
                                            <li><a href="#">Coffee &amp; Accent Tables</a></li>
                                            <li><a href="#">Chairs &amp; Recliners</a></li>
                                            <li><a href="#">Bookshelves</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Bedroom</a>
                                        <ul class="dl-submenu">
                                            <li>
                                                <a href="#">Beds</a>
                                                <ul class="dl-submenu">
                                                    <li><a href="#">Upholstered Beds</a></li>
                                                    <li><a href="#">Divans</a></li>
                                                    <li><a href="#">Metal Beds</a></li>
                                                    <li><a href="#">Storage Beds</a></li>
                                                    <li><a href="#">Wooden Beds</a></li>
                                                    <li><a href="#">Children's Beds</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Bedroom Sets</a></li>
                                            <li><a href="#">Chests &amp; Dressers</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Home Office</a></li>
                                    <li><a href="#">Dining &amp; Bar</a></li>
                                    <li><a href="#">Patio</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Jewelry &amp; Watches</a>
                                <ul class="dl-submenu">
                                    <li><a href="#">Fine Jewelry</a></li>
                                    <li><a href="#">Fashion Jewelry</a></li>
                                    <li><a href="#">Watches</a></li>
                                    <li>
                                        <a href="#">Wedding Jewelry</a>
                                        <ul class="dl-submenu">
                                            <li><a href="#">Engagement Rings</a></li>
                                            <li><a href="#">Bridal Sets</a></li>
                                            <li><a href="#">Women's Wedding Bands</a></li>
                                            <li><a href="#">Men's Wedding Bands</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /dl-menuwrapper -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            $(function() {
                $( '#dl-menu' ).dlmenu();
            });
        </script>
</body>
CSS

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* Common styles of menus */
.dl-menuwrapper {
    width: 0;
    max-width: 90%;
    float: left;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 50% 200%;
    perspective-origin: 50% 200%;
}
.dl-menuwrapper:first-child {
    margin-right: 0;
}
.dl-menuwrapper button {
    background: #395066;
    border: none;
    width: 48px;
    height: 90px;
    text-indent: -900em;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);
    -moz-box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);
    box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
    background: #32475b;
}
.dl-menuwrapper button:after {
    content: '';
    position: absolute;
    width: 68%;
    height: 5px;
    background: #fff;
    top: 30px;
    left: 16%;
    box-shadow: 
        0 10px 0 #fff, 
        0 20px 0 #fff;
}
.dl-menuwrapper ul {
    padding: 0;
    list-style: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-color: #009ee8;
    width: 350px;
}
.dl-menuwrapper li {
    position: relative;
    width: 350px;
    background-color: #395066;
}
.dl-menuwrapper li a {
    display: block;
    position: relative;
    padding: 15px 20px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
    color: #fff;
    outline: none;
    background-color: #395066;
}
.no-touch .dl-menuwrapper li a:hover {
    background: rgba(0,0,0,0.2);
}
.dl-menuwrapper li.dl-back > a {
    padding-left: 30px;
    background: #163a5b;
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
    position: absolute;
    top: 0;
    line-height: 50px;
    font-family: 'icomoon';
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "'e000";
    color: #eeeeee;
}
.dl-menuwrapper li.dl-back:after {
    left: 10px;
    color: rgba(212,204,198,0.3);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    color: #eeeeee;
}
.dl-menuwrapper li > a:after {
    right: 10px;
    color: rgba(0,0,0,0.15);
}
.dl-menuwrapper .dl-menu { /* biyang kerok 2*/
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.dl-menuwrapper .dl-menu.dl-menu-toggle {
    transition: all 0.3s ease;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}
/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
    display: none;
}
/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
    display: none;
}
.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
    display: block;
}
Jquery

;( function( $, window, undefined ) {
    'use strict';

    // global
    var Modernizr = window.Modernizr, $body = $( 'body' );
    $.DLMenu = function( options, element ) {
        this.$el = $( element );
        this._init( options );
    };
    // the options
    $.DLMenu.defaults = {
        // classes for the animation effects
        animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
        // callback: click a link that has a sub menu
        // el is the link element (li); name is the level name
        onLevelClick : function( el, name ) { return false; },
        // callback: click a link that does not have a sub menu
        // el is the link element (li); ev is the event obj
        onLinkClick : function( el, ev ) { return false; }
    };
    $.DLMenu.prototype = {
        _init : function( options ) {
            // options
            this.options = $.extend( true, {}, $.DLMenu.defaults, options );
            // cache some elements and initialize some variables
            this._config();
            var animEndEventNames = {
                    'WebkitAnimation' : 'webkitAnimationEnd',
                    'OAnimation' : 'oAnimationEnd',
                    'msAnimation' : 'MSAnimationEnd',
                    'animation' : 'animationend'
                },
                transEndEventNames = {
                    'WebkitTransition' : 'webkitTransitionEnd',
                    'MozTransition' : 'transitionend',
                    'OTransition' : 'oTransitionEnd',
                    'msTransition' : 'MSTransitionEnd',
                    'transition' : 'transitionend'
                };
            // animation end event name
            this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
            // transition end event name
            this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
            // support for css animations and css transitions
            this.supportAnimations = Modernizr.cssanimations,
            this.supportTransitions = Modernizr.csstransitions;
            this._initEvents();
        },
        _config : function() {
            this.open = false;
            this.$trigger = this.$el.children( '.dl-trigger' );
            this.$menu = this.$el.children( 'ul.dl-menu' );
            this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
            this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">back</a></li>' );
            this.$back = this.$menu.find( 'li.dl-back' );
        },
        _initEvents : function() {
            var self = this;
            this.$trigger.on( 'click.dlmenu', function() {
                if( self.open ) {
                    self._closeMenu();
                } 
                else {
                    self._openMenu();
                }
                return false;
            } );
            this.$menuitems.on( 'click.dlmenu', function( event ) {
                event.stopPropagation();
                var $item = $(this),
                    $submenu = $item.children( 'ul.dl-submenu' );
                if( $submenu.length > 0 ) {
                    var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
                        onAnimationEndFn = function() {
                            self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
                            $item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
                            $flyin.remove();
                        };
                    setTimeout( function() {
                        $flyin.addClass( self.options.animationClasses.classin );
                        self.$menu.addClass( self.options.animationClasses.classout );
                        if( self.supportAnimations ) {
                            self.$menu.on( self.animEndEventName, onAnimationEndFn );
                        }
                        else {
                            onAnimationEndFn.call();
                        }
                        self.options.onLevelClick( $item, $item.children( 'a:first' ).text() );
                    } );
                    return false;
                }
                else {
                    self.options.onLinkClick( $item, event );
                }
            } );
            this.$back.on( 'click.dlmenu', function( event ) {
                var $this = $( this ),
                    $submenu = $this.parents( 'ul.dl-submenu:first' ),
                    $item = $submenu.parent(),
                    $flyin = $submenu.clone().insertAfter( self.$menu );
                var onAnimationEndFn = function() {
                    self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
                    $flyin.remove();
                };
                setTimeout( function() {
                    $flyin.addClass( self.options.animationClasses.classout );
                    self.$menu.addClass( self.options.animationClasses.classin );
                    if( self.supportAnimations ) {
                        self.$menu.on( self.animEndEventName, onAnimationEndFn );
                    }
                    else {
                        onAnimationEndFn.call();
                    }
                    $item.removeClass( 'dl-subviewopen' );
                    var $subview = $this.parents( '.dl-subview:first' );
                    if( $subview.is( 'li' ) ) {
                        $subview.addClass( 'dl-subviewopen' );
                    }
                    $subview.removeClass( 'dl-subview' );
                } );
                return false;
            } );
        },
        closeMenu : function() {
            if( this.open ) {
                this._closeMenu();
            }
        },
        _closeMenu : function() {
            var self = this,
                onTransitionEndFn = function() {
                    self.$menu.off( self.transEndEventName );
                    self._resetMenu();
                };
            this.$menu.removeClass( 'dl-menuopen' );
            this.$menu.addClass( 'dl-menu-toggle' );
            this.$trigger.removeClass( 'dl-active' );
            if( this.supportTransitions ) {
                this.$menu.on( this.transEndEventName, onTransitionEndFn );
            }
            else {
                onTransitionEndFn.call();
            }
            this.open = false;
        },
        openMenu : function() {
            if( !this.open ) {
                this._openMenu();
            }
        },
        _openMenu : function() {
            var self = this;
            // clicking somewhere else makes the menu close
            $body.off( 'click' ).on( 'click.dlmenu', function() {
                self._closeMenu() ;
            } );
            this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
                $( this ).removeClass( 'dl-menu-toggle' );
            } );
            this.$trigger.addClass( 'dl-active' );
            this.open = true;
        },
        // resets the menu to its original state (first level of options)
        _resetMenu : function() {
            this.$menu.removeClass( 'dl-subview' );
            this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
        }
    };
    var logError = function( message ) {
        if ( window.console ) {
            window.console.error( message );
        }
    };
    $.fn.dlmenu = function( options ) {
        if ( typeof options === 'string' ) {
            var args = Array.prototype.slice.call( arguments, 1 );
            this.each(function() {
                var instance = $.data( this, 'dlmenu' );
                if ( !instance ) {
                    logError( "cannot call methods on dlmenu prior to initialization; " +
                    "attempted to call method '" + options + "'" );
                    return;
                }
                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                    logError( "no such method '" + options + "' for dlmenu instance" );
                    return;
                }
                instance[ options ].apply( instance, args );
            });
        } 
        else {
            this.each(function() {  
                var instance = $.data( this, 'dlmenu' );
                if ( instance ) {
                    instance._init();
                }
                else {
                    instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
                }
            });
        }
        return this;
    };
    $.fn.DLMenu=function(){
  return this.each( function(){
    if ( $( this ).data( 'dlmenu' ) ){
      return false;
    }
    $( this ).data( 'dlmenu', true );
    // plugin code
  });
};
} )( jQuery, window );

同一页面上的两个元素不能共享相同的ID。

$( '#dl-menu' ).dlmenu();更改为$( '.dl-menuwrapper' ).dlmenu();,它很可能会工作。

参考:https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really