Trigger Custom Dropdown w/jQuery

Question

В конечном счете, я хочу переключить выпадающее меню при щелчке по изображению. Я хочу использовать функцию «открыть/закрыть», которая определена в пользовательской библиотеке jQuery, но не может понять, как получить доступ к «открытой» функции.

Вопрос: Как получить доступ к функции «открыть» или «закрыть», определенную в пользовательской библиотеке jQuery? (Более подробно ниже - Пожалуйста, обратите внимание, у меня нулевой опыт использования JQuery Прототипы, который является большой частью этой проблемы. - Я даже не уверен, если я могу получить доступ к объекту правильно)

Любая помощь/предложения или указания оценили

---

Я использую Codrops Simple Effects for Dropdowns статью для справки.

В частности, я ссылаюсь на Demo #4 в своем примере/вопросе.

---

Пример использует пользовательскую библиотеку JQuery для укладки/оживляющий выпадающие:

• Это code repo (SimpleDropDownEffects)
• Вот raw code (jquery.dropdown.js)

---

Это довольно просто:

1. Сначала вы выложите свой HTML "выбрать" (раскрывающиеся) разметки

   <select id="cd-dropdown" class="cd-select"> 
       <option value="-1" selected>Choose an animal</option> 
       <option value="1" class="icon-monkey">Monkey</option> 
       <option value="2" class="icon-bear">Bear</option> 
       <option value="3" class="icon-squirrel">Squirrel</option> 
       <option value="4" class="icon-elephant">Elephant</option> 
   </select> 
   

2. (После включения всех необходимых файлов проект) Вы можете вызвать вашу функцию плагина

   $('#cd-dropdown').dropdown(); 
   

3. Функцию затем преобразует нашу «выборочную» разметку в следующую структуру:

   <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> 
   

4. Тогда функция реагирует на событие щелчка, как указано в их документации:

При нажатии на первом пролете, мы будем применять класс «CD-активный» своему родителю, разделение с класс «cd-dropdown». При выборе опции соответствующий интервал будет вставлен в первый.

---

Далее jquery.dropdown.js file содержит все определения, который построен с использованием метода «прототип» - который, как я уже раньше, у меня есть нулевой опыт использования. Я не буду включать весь файл (так как есть link), но я буду включать две функции, которые я пытаюсь получить, и где Я ДУМАЮ, он инициализируется.

Открытый Функция

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; 

    } 

Назвать это все

$.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; 
}; 

Настройка функции - Исходное определение

(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(); 

    }, 

Будем надеяться, что это имеет смысл для кого-то и они могут помочь мне.

---

Заключение

В заключении, я хочу нажать на изображение на странице, которая вызовет ту же функцию/эффект, который/которые выполняются, когда сам выпадающие кнопками.

Я не уверен, если я прошу правильный вопрос, так что я спрошу как:

1. Как я могу получить доступ к объекту функции, определенные в прототипе?
2. Как я могу выполнить раскрывающуюся функцию открытия при нажатии на другой элемент? (* Примечание. Это не будет работать как нормальное раскрывающееся меню, которое, как мне известно, сложно, если не невозможно, принудительно открыть. Я думаю, что я должен просто выполнить ту же функцию, которая выполняется при нажатии на раскрывающийся список .)

Благодарим за терпение и помощь в этом вопросе.

Answer 1

после различных испытаний я пришел с этим:

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

вы можете попробовать его на консоли браузера непосредственно на веб-сайте компонента (DEMO 4) вы связаны в вашем вопросе:

http://tympanus.net/Development/SimpleDropDownEffects/index4.html

Метод прототипа «открыто» расширен, при нажатии выпадающего меню вы получаете предупреждение. Вы можете легко расширить метод «закрыть» таким же образом.

Надеюсь, это поможет.

EDIT:

, чтобы вызвать выпадающее меню с помощью JavaScript, вы можете просто сделать это:

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