Question

全部！在这里，我想问一下jQuery .... 如何制作名为＆＃39; .eg-dropdown＆＃39; ....的元素创建此＆＃39; .eg-dropdown＆＃39;要适合的元素＆＃39; .btn-dropdown＆＃39; .....

谢谢，对不起我不太明显的英语.....

的index.html

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

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

Index.css

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

ul {
  margin: 0;
  padding: 0;
}

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

如下所示： -

li:first-child.class-name

工作示例： -

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

Answer 2

您可以使用简单的CSS来代替脚本

<T> Multiset<T> sum(List<Multiset<T>>)

$(document).ready(function(){
 
  $('.btn-dropdown > a').on('click', function(e){
    e.stopPropagation();
    $(this).siblings('.eg-dropdown').toggle();
  });
});

.btn-dropdown {
  display: inline-block;
  width: 100px;
  height: 20px;
  position: relative;
  background: green;
}

ul {
  margin: 0;
  padding: 0;
}
.eg-dropdown {
  display: none;
  position: absolute;
  left: 0px;
  top: 100%;
}

Answer 3



  $(document).ready(function(){
 
  $('.btn-dropdown').on('click', function(e){
    e.stopPropagation();
    $(this).children('.eg-dropdown').toggle('slow',function(){
    	alert("fbhdh");
    
    });
  });
});
    .btn-dropdown {
      display: inline-block;
      width: 100px;
      height: 20px;
      position: relative;
      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
        <ul class="eg-dropdown">
         <li>Teman</li>
         <li>Pribadi</li>
       </ul>
    </div>

使用jQuery动态位置下拉列表

3 个答案: