ajax load inner html в div из выпадающего меню выберите

Question

У меня есть раскрывающееся меню, которое я хочу использовать в качестве навигационного меню. Выпадающий код кодируется js и css, чтобы придать ему стиль и чувство стиля, которые я хочу. Значения устанавливаются на номера, чтобы показывать ссылки в порядке, а класс используется для загрузки изображения рядом с текстом внутри выпадающего меню. Что я использую этот код для загрузки ссылки внутри этого определенного DIV (apDiv2)
AJAX ПОГРУЗЧИКОМ

$('.menu_nav').click(function() { 
var href = $(this).attr('href'); 

// loading gif// 
$('#apDiv2').empty().append($('<img src="/loader.gif" />')); 

$.ajax({ 
    method: 'GET', 
    url: href, 
    success: function(content) 
    { 
     $('#apDiv2').html (content); 
    } 
}); 

return false; 
}); 

Я хочу, чтобы иметь возможность использовать этот Ajax код для загрузки innerHTML страниц моего сайта в Div 2. Я также использую modenizer.js для функционирования этого выпадающего меню. Есть ли способ получить это меню для загрузки страницы в этот назначенный div без изменения моего стиля и внешнего вида этого выпадающего меню?

Это меню js?
DropDown Меню Js

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

    }, 
    _layout : function() { 

     var self = this; 
     this.minZIndex = 1000; 
     var value = this._transformSelect(); 
     this.opts = this.listopts.children('li'); 
     this.optsCount = this.opts.length; 
     this.size = { width : this.dd.width(), height : this.dd.height() }; 

     var elName = this.$el.attr('name'), elId = this.$el.attr('id'), 
      inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + (new Date()).getTime(); 

     this.inputEl = $('<input type="hidden" name="' + inputName + '" value="' + value + '"></input>').insertAfter(this.selectlabel); 

     this.selectlabel.css('z-index', this.minZIndex + this.optsCount); 
     this._positionOpts(); 
     if(Modernizr.csstransitions) { 
      setTimeout(function() { self.opts.css('transition', 'all ' + self.options.speed + 'ms ' + self.options.easing); }, 25); 
     } 

    }, 
    _transformSelect : function() { 

     var optshtml = '', selectlabel = '', value = -1; 
     this.$el.children('option').each(function() { 

      var $this = $(this), 
       val = isNaN($this.attr('value')) ? $this.attr('value') : Number($this.attr('value')) , 
       classes = $this.attr('class'), 
       selected = $this.attr('selected'), 
       label = $this.text(); 

      if(val !== -1) { 
       optshtml += 
        classes !== undefined ? 
         '<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' : 
         '<li data-value="' + val + '"><span>' + label + '</span></li>'; 
      } 

      if(selected) { 
       selectlabel = label; 
       value = val; 
      } 

     }); 

     this.listopts = $('<ul/>').append(optshtml); 
     this.selectlabel = $('<span/>').append(selectlabel); 
     this.dd = $('<div class="cd-dropdown"/>').append(this.selectlabel, this.listopts).insertAfter(this.$el); 
     this.$el.remove(); 

     return value; 

    }, 
    _positionOpts : function(anim) { 

     var self = this; 

     this.listopts.css('height', 'auto'); 
     this.opts 
      .each(function(i) { 
       $(this).css({ 
        zIndex : self.minZIndex + self.optsCount - 1 - i, 
        top : self.options.slidingIn ? (i + 1) * (self.size.height + self.options.gutter) : 0, 
        left : 0, 
        marginLeft : self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0, 
        opacity : self.options.slidingIn ? 0 : 1, 
        transform : 'none' 
       }); 
      }); 

     if(!this.options.slidingIn) { 
      this.opts 
       .eq(this.optsCount - 1) 
       .css({ top : this.options.stack ? 9 : 0, left : this.options.stack ? 4 : 0, width : this.options.stack ? this.size.width - 8 : this.size.width, transform : 'none' }) 
       .end() 
       .eq(this.optsCount - 2) 
       .css({ top : this.options.stack ? 6 : 0, left : this.options.stack ? 2 : 0, width : this.options.stack ? this.size.width - 4 : this.size.width, transform : 'none' }) 
       .end() 
       .eq(this.optsCount - 3) 
       .css({ top : this.options.stack ? 3 : 0, left : 0, transform : 'none' }); 
     } 

    }, 
    _initEvents : function() { 

     var self = this; 

     this.selectlabel.on('mousedown.dropdown', function(event) { 
      self.opened ? self.close() : self.open(); 
      return false; 

     }); 

     this.opts.on('click.dropdown', function() { 
      if(self.opened) { 
       var opt = $(this); 
       self.options.onOptionSelect(opt); 
       self.inputEl.val(opt.data('value')); 
       self.selectlabel.html(opt.html()); 
       self.close(); 
      } 
     }); 

    }, 
    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; 
}; 

})(jQuery, window); 

Есть ли способ, что я могу Impliment Аякс Loader запрограммировав Выпадающее меню JS? Пожалуйста, помогите мне стать нищим для этого Ajax и JS

Answer 1

В вашем коде Dropdown js у вас есть прослушиватель событий, который называется close. Здесь вы можете захватить выбранный элемент, вызвав this.inputEl.val(). Это даст вам идентификационный номер, присвоенный этому конкретному навигационному элементу, который вы нажали. С этим номером создайте URL-адрес, который будет соответствовать идентификатору и вызовет ajax для этого URL-адреса. Получите содержимое из URL-адреса и добавьте его туда, где хотите.

Может быть что-то вроде этого

if(this.inputEl.val() == 1){ 
    herf = "test.com/home" 
}else if(this.inputEl.val() == 2){ 
    href = "test.com/music" 
}//etc 

$.ajax({ 
    method: 'GET', 
    url: herf, 
    success: function(content) 
    { 
     $('#apDiv2').html(content); 
    } 
}); 

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