物化滑动标签不适用于模态

我遇到了一个奇怪的问题。 我在物化标签上使用滑动，当我在没有模态的情况下滑动它工作正常但是当我将它们包含在模态中时，滑动function不再起作用了

$(document).ready(function() { $('.modal').modal(); $('.tabs').tabs({ swipeable: true }); }) 

 div.tabs-content.carousel.carousel-slider { height: 200px !important; } 

         
Open
 
 
 
Register your profession
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
 
Test 1
 
Test 2
 
Test 3
 
 
 
 
 Agree 
 
     

这是小提琴： jsfiddle

Answer 1

由于模态默认是隐藏的，因此模态中选项卡的正常初始化将不起作用。 您可以使用onOpenEnd之类的回调重新初始化选项卡，以便在模式完全打开后正确呈现。

 $('.modal').modal({ onOpenEnd: function(el) { $(el).find('.tabs').tabs({ swipeable: true }); } }); 

这是一个使用该回调的更新小提琴： https ： //jsfiddle.net/y7rmbd6w/14/

Answer 2

由于jQuery不再是Materialise CSS中的依赖项，因此为了使用vanillaJS，可以使用它 –

 document.addEventListener('DOMContentLoaded', function() { const options = { onOpenEnd: (el) => { M.Tabs.init(el.querySelector('.tabs'), { swipeable: true }); } } let elems = document.querySelectorAll('.modal'); let instances = M.Modal.init(elems, options); });