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();
});

更新：我的最终目标是让Dropdown的底部与按钮处于同一水平（即vOffset使用$("#example-dropdown").height()）

Answer 1

您必须使用此类data-option属性才能获得结果。参考here。

如何在html中使用data-option方法：

1。要使用任何属性，请不要在初始化中使用任何连字符和数据文本。

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>

＆＃13;

$(document).foundation();

＆＃13;

.container {
  margin: 15rem;

  margin-top:0px;
}

＆＃13;

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

＆＃13;

基础下拉垂直偏移不起作用

1 个答案: