1

我在这样的基础中使用标准示例进行画布外导航......

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

我正在寻找一种在动画完成后触发 jquery CSS 函数的方法。

到目前为止我有这个..

$( document ).on( "close.offcanvas", function( e ){
    //$('.pagination').css('display','block');
});

但这会在单击打开按钮时触发，有人知道我是否可以使用任何回调或类似的东西，以便仅在关闭画布动画完成后应用 CSS？

4

1 回答 1

1

Foundation 为此目的包括一个“打开”和“关闭”事件：https ://foundation.zurb.com/sites/docs/off-canvas.html#js-events

在下面的代码示例中，我在菜单关闭时向控制台输出一条消息。

$(document).foundation()

$('#offCanvas').on('closed.zf.offcanvas', function(event) {
  //$('.pagination').css('display','block');
  console.log("Off-canvas menu was closed.")
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.min.js"></script>

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>

  <!-- Menu -->
  <ul class="vertical menu">
    <li><a href="#">Foundation</a></li>
    <li><a href="#">Dot</a></li>
    <li><a href="#">ZURB</a></li>
    <li><a href="#">Com</a></li>
    <li><a href="#">Slash</a></li>
    <li><a href="#">Sites</a></li>
  </ul>

  <!-- Close button -->
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>

</div>

<div class="off-canvas-content" data-off-canvas-content>
  <!-- Your page content lives here -->
  <button type="button" class="button" data-toggle="offCanvas">Open off-canvas</button>
</div>

于 2018-11-20T14:56:21.250 回答