javascript - 物化滑动标签在模态中不起作用
问题描述
我遇到了一个奇怪的问题。我在物化选项卡上使用滑动,当我在没有模态的情况下进行滑动时,它工作正常,但是当我将它们包含在模态中时,滑动功能不再起作用
$(document).ready(function() {
$('.modal').modal();
$('.tabs').tabs({
swipeable: true
});
})
div.tabs-content.carousel.carousel-slider {
height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>
<div id="profession-registration-modal" class="modal">
<div class="modal-content">
<h4>Register your profession</h4>
<div class="row">
<div class="col s12">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
</ul>
<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
这是小提琴:jsfiddle
解决方案
因为模态框默认是隐藏的,所以模态框内的选项卡的正常初始化将不起作用。您可以使用 onOpenEnd 之类的回调来重新初始化您的选项卡,以便它们在模式完全打开后正确呈现。
$('.modal').modal({
onOpenEnd: function(el) {
$(el).find('.tabs').tabs({ swipeable: true });
}
});
这是使用该回调的更新小提琴:https ://jsfiddle.net/y7rmbd6w/14/
推荐阅读
- php - 如何在 Smarty 模板引擎中使用条件渲染 HTML 标签?
- javascript - 每次我向列表中添加一些项目时,如何将对象属性(在此示例中为 isbn)增加一:?
- multithreading - 多线程时如何安全地访问和修改数组?
- javascript - 如何测试不带参数的命令行应用程序?
- node.js - Node.js 将数据写入文件会引发错误
- google-search - 谷歌搜索显示 / 而不是标题和描述的索引
- c - 链表总是显示为空
- ios - 错误:Runner.xcworkspace 不存在。执行谷歌地图时出错
- java - 如何使用 java spring 注释在 MongoDB 中创建一个完全填充的引用对象
- android - 广告使recyclerview滞后