動態位置下拉與jQuery

Question

所有！ 在這裏，我想問一下jQuery .... 如何製作一個名爲'.eg-dropdown'的元素.... 創建'.eg-dropdown'元素以適合'.btn-dropdown'。 ....

謝謝，對不起，我不太明顯的英文.....

的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

做它象下面這樣： -

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

Answer 2

而是腳本可以使用簡單的CSS這個

$(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%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-dropdown"><a href="#" title="">Publik</a> 
 
    <ul class="eg-dropdown"> 
 
    <li>Teman</li> 
 
    <li>Pribadi</li> 
 
    </ul> 
 
</div>

Answer 3

             
  
 
   
 
    
$(document).ready(function(){ 
 
    
 
    $('.btn-dropdown').on('click', function(e){ 
 
    e.stopPropagation(); 
 
    $(this).children('.eg-dropdown').toggle('slow',function(){ 
 
    \t 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>