jquery - 使用 jQuery 的动态位置下拉列表

Question

全部!在这里，我想问一下jQuery ...如何制作一个名为 .eg-dropdown 的元素...创建此 .eg-dropdown 元素以适合右侧 .btn-dropdown...

谢谢，抱歉我的英语不太好...

索引.html

<div class="btn-dropdown">Publik</div>

<ul class="eg-dropdown">
 <li>Teman</li>
 <li>Pribadi</li>
</ul>

索引.css

.btn-dropdown {
  display: inline-block;
  width: 100px;
  height: 20px;
  position: absolute;
  top: 100px;
  left: 100px;
  background: green;
}

ul {
  margin: 0;
  padding: 0;
}

索引.js

// DROPDOWN
$(document).ready(function(){
 var position_btn = $('.btn-dropdown').position();
 $('.btn-dropdown').on('click', function(e){
  e.stopPropagation();
  console.log(position_btn);
 });

 $('.eg-dropdown').css({
  'position' : 'absolute',
  'top' : position_btn.top + $('.btn-dropdown').innerHeight(),
  'left' : position_btn.left
 });
});

在 JSFIDDLE 中查看 https://jsfiddle.net/FIERMANDT/1kLvdys1/

Answer 1

像下面那样做:

// DROPDOWN
$(document).ready(function(){
    var position_btn = $('.btn-dropdown').position();
    var widthBtn = $('.btn-dropdown').width();
    var widthEg = $('.btn-dropdown').height();
    $('.btn-dropdown').on('click', function(e){
        e.stopPropagation();
        console.log(widthEg);
    });

    $('.eg-dropdown').css({
        'position' : 'absolute',
        'top' : position_btn.top + $('.btn-dropdown').innerHeight(),
        'left' : position_btn.left + widthBtn - widthEg
    });
});

工作示例:

$(document).ready(function(){
  var position_btn = $('.btn-dropdown').position();
  var widthBtn = $('.btn-dropdown').width();
  var widthEg = $('.btn-dropdown').height();
  $('.btn-dropdown').on('click', function(e){
    e.stopPropagation();
    console.log(widthEg);
  });

  $('.eg-dropdown').css({
    'position' : 'absolute',
    'top' : position_btn.top + $('.btn-dropdown').innerHeight(),
    'left' : position_btn.left + widthBtn - widthEg
  });
});

.btn-dropdown {
  display: inline-block;
  width: 100px;
  height: 20px;
  position: absolute;
  top: 100px;
  left: 100px;
  background: green;
}

ul {
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-dropdown">Publik</div>

<ul class="eg-dropdown">
 <li>Teman</li>
 <li>Pribadi</li>
</ul>