使用jQuery触发自定义下拉列表

最后，我想在单击图像时切换选择下拉列表。我想使用自定义jQuery库中定义的“open/close”函数，但不知道如何访问“open”函数

问题：如何访问自定义jQuery库中定义的“打开”或“关闭”函数？（下面的更多细节-请注意，我没有使用jQuery原型的经验，这是这个问题的一大部分-我甚至不确定我是否能够正确访问该对象。）

感谢您的任何帮助/建议或指导

---

我用这篇文章作为参考

具体来说，我在我的示例/问题中引用了

---

该示例使用自定义jQuery库设置下拉列表的样式/动画：

• 这是
• 这是你的电话号码

---

这相当简单：

首先，您要布置HTML“选择”（下拉）标记

然后，该函数将“select”标记转换为以下结构

<div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
</div>

关闭功能

open : function() {
        var self = this;
        this.dd.toggleClass( 'cd-active' );
        this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
        this.opts.each( function( i ) {

            $( this ).css( {
                opacity : 1,
                top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ),
                left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
                width : self.size.width,
                marginLeft : 0,
                transform : self.options.random ?
                    'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
                    self.options.rotated ?
                        self.options.rotated === 'right' ?
                            'rotate(-' + ( i * 5 ) + 'deg)' :
                            'rotate(' + ( i * 5 ) + 'deg)'
                        : 'none',
                transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
            } );

        } );
        this.opened = true;

    },

close : function() {

        var self = this;
        this.dd.toggleClass( 'cd-active' );
        if( this.options.delay && Modernizr.csstransitions ) {
            this.opts.each( function( i ) {
                $( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
            } );
        }
        this._positionOpts( true );
        this.opened = false;

    }

( function( $, window, undefined ) {

'use strict';

$.DropDown = function( options, element ) {
    this.$el = $( element );
    this._init( options );
};

// the options
$.DropDown.defaults = {
    speed : 300,
    easing : 'ease',
    gutter : 0,
    // initial stack effect
    stack : true,
    // delay between each option animation
    delay : 0,
    // random angle and positions for the options
    random : false,
    // rotated [right||left||false] : the options will be rotated to thr right side or left side.
    // make sure to tune the transform origin in the stylesheet
    rotated : false,
    // effect to slide in the options. value is the margin to start with
    slidingIn : false,
    onOptionSelect : function(opt) { return false; }
};

$.DropDown.prototype = {

    _init : function( options ) {

        // options
        this.options = $.extend( true, {}, $.DropDown.defaults, options );
        this._layout();
        this._initEvents();

    },

称之为一切

$.fn.dropdown = function( options ) {
    var instance = $.data( this, 'dropdown' );
    if ( typeof options === 'string' ) {
        var args = Array.prototype.slice.call( arguments, 1 );
        this.each(function() {
            instance[ options ].apply( instance, args );
        });
    }
    else {
        this.each(function() {
            instance ? instance._init() : instance = $.data( this, 'dropdown', new $.DropDown( options, this ) );
        });
    }
    return instance;
};

设置功能-初始定义

open : function() {
        var self = this;
        this.dd.toggleClass( 'cd-active' );
        this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
        this.opts.each( function( i ) {

            $( this ).css( {
                opacity : 1,
                top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ),
                left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
                width : self.size.width,
                marginLeft : 0,
                transform : self.options.random ?
                    'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
                    self.options.rotated ?
                        self.options.rotated === 'right' ?
                            'rotate(-' + ( i * 5 ) + 'deg)' :
                            'rotate(' + ( i * 5 ) + 'deg)'
                        : 'none',
                transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
            } );

        } );
        this.opened = true;

    },

close : function() {

        var self = this;
        this.dd.toggleClass( 'cd-active' );
        if( this.options.delay && Modernizr.csstransitions ) {
            this.opts.each( function( i ) {
                $( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
            } );
        }
        this._positionOpts( true );
        this.opened = false;

    }

( function( $, window, undefined ) {

'use strict';

$.DropDown = function( options, element ) {
    this.$el = $( element );
    this._init( options );
};

// the options
$.DropDown.defaults = {
    speed : 300,
    easing : 'ease',
    gutter : 0,
    // initial stack effect
    stack : true,
    // delay between each option animation
    delay : 0,
    // random angle and positions for the options
    random : false,
    // rotated [right||left||false] : the options will be rotated to thr right side or left side.
    // make sure to tune the transform origin in the stylesheet
    rotated : false,
    // effect to slide in the options. value is the margin to start with
    slidingIn : false,
    onOptionSelect : function(opt) { return false; }
};

$.DropDown.prototype = {

    _init : function( options ) {

        // options
        this.options = $.extend( true, {}, $.DropDown.defaults, options );
        this._layout();
        this._initEvents();

    },

希望这对某些人来说是有意义的，他们可以帮助我

---

结论

open : function() {
        var self = this;
        this.dd.toggleClass( 'cd-active' );
        this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
        this.opts.each( function( i ) {

            $( this ).css( {
                opacity : 1,
                top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ),
                left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
                width : self.size.width,
                marginLeft : 0,
                transform : self.options.random ?
                    'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
                    self.options.rotated ?
                        self.options.rotated === 'right' ?
                            'rotate(-' + ( i * 5 ) + 'deg)' :
                            'rotate(' + ( i * 5 ) + 'deg)'
                        : 'none',
                transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
            } );

        } );
        this.opened = true;

    },

close : function() {

        var self = this;
        this.dd.toggleClass( 'cd-active' );
        if( this.options.delay && Modernizr.csstransitions ) {
            this.opts.each( function( i ) {
                $( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
            } );
        }
        this._positionOpts( true );
        this.opened = false;

    }

( function( $, window, undefined ) {

'use strict';

$.DropDown = function( options, element ) {
    this.$el = $( element );
    this._init( options );
};

// the options
$.DropDown.defaults = {
    speed : 300,
    easing : 'ease',
    gutter : 0,
    // initial stack effect
    stack : true,
    // delay between each option animation
    delay : 0,
    // random angle and positions for the options
    random : false,
    // rotated [right||left||false] : the options will be rotated to thr right side or left side.
    // make sure to tune the transform origin in the stylesheet
    rotated : false,
    // effect to slide in the options. value is the margin to start with
    slidingIn : false,
    onOptionSelect : function(opt) { return false; }
};

$.DropDown.prototype = {

    _init : function( options ) {

        // options
        this.options = $.extend( true, {}, $.DropDown.defaults, options );
        this._layout();
        this._initEvents();

    },

总之，我想单击页面上的一个图像，这将触发与单击下拉菜单本身时执行的相同的功能/效果

我不确定我问的问题是否正确，因此我将同时问两个问题：

如何访问原型中定义的函数对象

单击另一个元素时，如何执行下拉打开功能？（*注意-这不会像正常的下拉菜单一样工作，我知道强制打开它很困难，如果不是不可能的话。我想我应该能够执行与单击下拉菜单时执行的相同的功能。）

---

感谢您在这件事上的耐心和帮助。

经过多次测试，我得出以下结论：

$.extend(
  $.DropDown.prototype, {
    open: function() {
      // YOUR CODE HERE
      alert('YYY');
    }
  }
);

您可以在浏览器控制台上直接在您在问题中链接的组件网站（演示4）上进行尝试：

原型方法“open”被扩展，当您单击下拉菜单时，您将收到警报。 您可以用同样的方法轻松地扩展“close”方法

希望这有帮助

编辑：

要通过javascript触发下拉列表，只需执行以下操作：

$('.cd-dropdown span').mousedown();

---

谢谢，我会实现这个并尝试一下。我没有原型函数的经验，所以我正在研究如何扩展开放函数，我只是不知道我在搜索什么，所以这是一个很大的帮助。给我一点时间来实现和尝试。我将报告我的结果。扩展可以放在我的“站点脚本”文件中，对吗？它不需要在库中进行任何特殊放置，因为它使用的是对象，对吗？没错。如果只需要触发open方法，只需模拟click$（'.cd下拉列表span'）.mousedown（）；哇！一直都那么容易？！WTF lol您的代码是原型函数的创建学习工具。另外，我想问，为什么“.click（）；”不起作用-为什么只有“.mousedown（）”起作用？我想原因是它特别与mousedown事件有关。您可以使用firefox查看元素并单击元素旁边的“EV”图标。它将显示绑定到它的所有事件。