Привязка выпадающего списка к правой стороне родительского элемента

[Torawhite]

Здравствуйте! Есть список и скрипт, который список показывает и скрывает. Но список привязан к левому краю блока со ссылкой, а как можно сделать, чтобы привязка была к правому краю независимо от ширины блока ссылки?

[coolhtml]

Так?
 

$(function() {  // Dropdown toggle  var dropdownToggle = $('.dropdown-toggle'),      dropdown = $('.dropdown'),      dropdownPosition = dropdownToggle.innerWidth();    $(dropdownToggle).click(function(){      $(this).next(dropdown).toggle();      $(dropdown).css('margin-left', dropdownPosition + 'px');    });  $(document).click(function(e) {    var target = e.target;    (!$(target).is(dropdownToggle) && !$(target).parents().is(dropdownToggle)) ? $(dropdown).hide() : '';  });});

[Torawhite]

 

Так?

 

$(function() {  // Dropdown toggle  var dropdownToggle = $('.dropdown-toggle'),      dropdown = $('.dropdown'),      dropdownPosition = dropdownToggle.innerWidth();    $(dropdownToggle).click(function(){      $(this).next(dropdown).toggle();      $(dropdown).css('margin-left', dropdownPosition + 'px');    });  $(document).click(function(e) {    var target = e.target;    (!$(target).is(dropdownToggle) && !$(target).parents().is(dropdownToggle)) ? $(dropdown).hide() : '';  });});

Спасибо, но нет. Нужно, чтобы правая сторона списка была вровень с правой стороной кнопки. То бишь выпадать в левую сторону, а не в правую

[afdw]

http://codepen.io/anon/pen/jPWwKj

[coolhtml]

$(function() {

// Dropdown toggle

var dropdownToggle = $('.dropdown-toggle'),

dropdown = $('.dropdown'),

margin = dropdown.innerWidth() - dropdownToggle.innerWidth();

$(dropdown).css('margin-left', - margin);

$(dropdownToggle).click(function(){

$(this).next(dropdown).toggle();

});

$(document).click(function(e) {

var target = e.target;

(!$(target).is(dropdownToggle) && !$(target).parents().is(dropdownToggle)) ? $(dropdown).hide() : '';

});

});

[Torawhite]

http://codepen.io/anon/pen/jPWwKj

 

$(function() {  // Dropdown toggle  var dropdownToggle = $('.dropdown-toggle'),      dropdown = $('.dropdown'),      margin = dropdown.innerWidth() - dropdownToggle.innerWidth();      $(dropdown).css('margin-left', - margin);    $(dropdownToggle).click(function(){      $(this).next(dropdown).toggle();    });  $(document).click(function(e) {    var target = e.target;    (!$(target).is(dropdownToggle) && !$(target).parents().is(dropdownToggle)) ? $(dropdown).hide() : '';  });});

Спасибо! То, что нужно! А есть способ раскрывать список вверх, а не вниз?

[afdw]

 

http://codepen.io/anon/pen/jPWwKj

 

$(function() {  // Dropdown toggle  var dropdownToggle = $('.dropdown-toggle'),      dropdown = $('.dropdown'),      margin = dropdown.innerWidth() - dropdownToggle.innerWidth();      $(dropdown).css('margin-left', - margin);    $(dropdownToggle).click(function(){      $(this).next(dropdown).toggle();    });  $(document).click(function(e) {    var target = e.target;    (!$(target).is(dropdownToggle) && !$(target).parents().is(dropdownToggle)) ? $(dropdown).hide() : '';  });});

Спасибо! То, что нужно! А есть способ раскрывать список вверх, а не вниз?

 

http://codepen.io/anon/pen/jPWwRN

[Torawhite]

 

 

http://codepen.io/anon/pen/jPWwKj

 

$(function() {  // Dropdown toggle  var dropdownToggle = $('.dropdown-toggle'),      dropdown = $('.dropdown'),      margin = dropdown.innerWidth() - dropdownToggle.innerWidth();      $(dropdown).css('margin-left', - margin);    $(dropdownToggle).click(function(){      $(this).next(dropdown).toggle();    });  $(document).click(function(e) {    var target = e.target;    (!$(target).is(dropdownToggle) && !$(target).parents().is(dropdownToggle)) ? $(dropdown).hide() : '';  });});

Спасибо! То, что нужно! А есть способ раскрывать список вверх, а не вниз?

 

http://codepen.io/anon/pen/jPWwRN

 

Спасибо большое!