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

Question

Я пытаюсь открыть раскрывающийся список с абсолютным позиционированием рядом с элементом, по которому щелкнули, который открывает раскрывающийся список.Обычно вы используете position:relative и position:absolute, но мой вопрос немного отличается.

Мое раскрывающееся меню не находится рядом с элементом, по которому щелкнули, а вместо этого находится вне этого элемента сразу после тега body.Поэтому обычно вы делаете что-то вроде этого:

 <li class="cart dropdown-opener">
   <div class="dropdown">...html for cart..</div>
 </li>

$('.dropdown-opener').on('click', function(e){
    $(this).find('.dropdown').addClass('open');
});

В моем случае это что-то вроде этого:

 <div data-open="cart">
   <div class="dropdown">...html for cart..</div>
 </div>

 <li class="cart dropdown-opener"></li>

  $('.dropdown-opener').on('click', function(e){
    var open_this = $(this).data('dropdown');
    $(document).find("[data-open='" + open_this + "']").find('.dropdown').addClass('open'); 
  });

Для завершения:

.dropdown {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0);
    max-height: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 50px;
    transform: translateZ(0px);
    transition-delay: 0.1s, 0.1s, 0.5s;
    transition-duration: 0.3s, 0.3s, 0.7s;
    transition-property: max-height, width, box-shadow;
    transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
    width: 0;
    z-index: 9998;
    cursor: auto;
}
.dropdown.open {
    box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.5);
    max-height: 500px;
    width: 650px;
}

ЧтоЯ пытаюсь сделать это, чтобы открыть это раскрывающееся рядом с нажатием элемента cart dropdown-opener.Так что он работает как при использовании position:relative и position:absolute.

Но я понятия не имею, с чего начать.Любая помощь с благодарностью.