Question

我正在模特中展示旋转木马，但我遇到了问题。当我加载页面并点击类别时，轮播显示交错或迷失方向;但是当我点击模态内部时，它会出现确切的形状。我正在使用jQuery插件，但我认为我无法按顺序放置它们。我在这里提供我的HTML和JavaScript;我已经正确地包含了jQuery和其他CDN。

HTML：

<body>
<div id="modal1"  class="modal bottom-sheet">
    <div class="modal-content">



        <div id="modal2"  class="carousel ">
            <a class="carousel-item" href="#one!"><img src="1.jpg"></a>
            <a class="carousel-item" href="#two!"><img src="1.jpg"></a>
            <a class="carousel-item" href="#three!"><img src="1.jpg"></a>
            <a class="carousel-item" href="#four!"><img src="1.jpg"></a>
            <a class="carousel-item" href="#five!"><img src="1.jpg"></a>
        </div>


    </div>
    <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>
<header>
<div class="navbar-fixed">
    <ul id="dropdown1" class="dropdown-content">
        <li><a href="#">Profile</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
    </ul>
<nav>
    <div class="nav-wrapper" >
        <div class="brand-logo" href="#" style="height:100%;pointer-events: none;">
            <img src="logo.png" style="height:100%;">
        </div>
        <a href="#" class="brand-logo center" style="color: rgba(0,0,0,0.73);pointer-events: none;"><b>Idea Watch</b></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a id="cate" href="#modal1" style="color: rgba(0,0,0,0.73);margin-right: 40%">CATEGORIES</a></li>
            <li><a href="#" style="color: rgba(0,0,0,0.73);margin-right: 20%">BOOKMARKS</a></li>
            <li><a class="dropdown-button" href="#" data-activates="dropdown1" style="margin-left: 50%">ME<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
    </div>
</nav>
</div>
</header>

这是我的JS：

$(document).ready(function () {
    let a = $(".dropdown-button");
    a.dropdown();
    $('.carousel').carousel();
    $('.modal').modal({
        dismissible: true, // Modal can be dismissed by clicking outside of the modal
        opacity: 0,
        inDuration: 300, // Transition in duration
        outDuration: 200, // Transition out duration
        startingTop: '4%', // Starting top style attribute
        endingTop: '10%' // Ending top style attribute
    });
    $('.parallax').parallax();
});

这是CSS：

.modal{
    position:absolute;
    overflow:scroll;
}

删除或编写上述css没有任何帮助

请帮助！

＆LT; ---------- ------ EDIT1＆GT; 点击之前的图片：

点击模式后的图片：

Answer 1

您必须在其就绪回调中初始化模态中的组件。

https://codepen.io/anon/pen/QgrMVd

$(document).ready(function () {
    let a = $(".dropdown-button");
    a.dropdown();
    $('.modal').modal({
        dismissible: true, // Modal can be dismissed by clicking outside of the modal
        opacity: 0,
        inDuration: 300, // Transition in duration
        outDuration: 200, // Transition out duration
        startingTop: '4%', // Starting top style attribute
        endingTop: '10%', // Ending top style attribute
        ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
          $('.carousel').carousel();
        },
    });
    $('.parallax').parallax();
});

物化转盘的交错显示，同时以模态显示它们

1 个答案: