Foundation 드롭 다운 수직 오프셋이 작동하지 않음

Question

재단에서 vOffset을 작동시킬 수 없습니다. 나는 the documentation을 따라 갔지만이 간단한 작업에 실패했습니다. 기초에서는 html에 data-v-offset 속성을 지정하거나 초기화하는 동안 옵션에 vOffset을 전달할 수 있습니다.

바이올린은 내가 만든 : 완전성에 대해 https://jsfiddle.net/amir734jj/exyy4eLz/

코드 :

<div class="container"> 
    <button class="button" type="button" data-toggle="example-dropdown">Top Aligned</button> 

    <div class="dropdown-pane right" id="example-dropdown" data-dropdown> 
    Just some junk that needs to be said. Or not. Your choice. 
    </div> 
</div> 

$(document).ready(function() { 
    var element = new Foundation.Dropdown($("#example-dropdown"), { 
    hover: true, 
    vOffset: 150 
    }); 

    $("#example-dropdown").foundation(); 
}); 

---

업데이트 : 내 최종 목표는 드롭 다운의 하단 버튼과 같은 수준이 될 수 있도록하는 것입니다 (즉, vOffset을 $("#example-dropdown").height()으로 입력하십시오.

Answer 1

data-option 속성을 사용해야합니다. 결과를 얻기 위해서. 참조 번호 here.

어떻게 HTML에서 데이터 옵션 방법을 사용합니다 :

1. 그냥 initializaion에있는 하이픈 및 데이터 텍스트를 사용 해달라고 모든 속성을 사용합니다.

2. 복수의 속성을 사용하려면 세미콜론을 구분 기호로 사용하십시오.

<div class="dropdown-pane right" id="example-dropdown" data-dropdown data-options="vOffset:100; hover: true;"> 
    Just some junk that needs to be said. Or not. Your choice. 
    </div> 

$(document).foundation();

.container { 
 
    margin: 15rem; 
 

 
    margin-top:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script> 
 

 
<div class="container"> 
 
    <button class="button" type="button" data-toggle="example-dropdown">Top Aligned</button> 
 

 
    <div class="dropdown-pane " id="example-dropdown" data-dropdown data-options="vOffset:100;hOffset:80; hover:true; "> 
 
    Just some junk that needs to be said. Or not. Your choice. 
 
    </div> 
 
</div>