Question

我最近遇到了这个框架Kube，它看起来非常有吸引力和乐趣，但是在解决问题时并没有很多在线资料。我承认，我并不擅长jQuery和交互式Web开发，但我已经成功地将jQuery与其他框架一起使用，包括Bootstrap和Materialize。

我特别难以尝试获取模态和折叠在Kube中工作，我不知道在哪里放置jQuery以及如何格式化它，以及我做错了什么。我从“快速入门”页面（https://imperavi.com/kube/docs/quick-start/）获取代码并使用它构建了一个模板，然后从折叠页面（https://imperavi.com/kube/docs/collapse/）中的API部分获取代码并尝试将其插入，从下面的jQuery，但我无法打开和关闭框。我在这个框架中的模态有类似的问题。

这是我的代码。非常感谢任何帮助：

 <!DOCTYPE html>
<html>
<head>
    <title>Basic Template</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Kube CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/kube/6.5.2/css/kube.css">


</head>
<body>
    <h1>Hello, world!</h1>

    <div id="my-collapse" data-component="collapse">

       <button onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button>
        <button onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button>
        <button onclick="$('#my-collapse-api').collapse('openAll');">Open All</button>
        <button onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button>

        <div id="my-collapse-api" data-component="collapse">

            <h4><a href="#box-1" class="collapse-toggle">Box 1</a></h4>
            <div class="collapse-box hide" id="box-1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut sapien malesuada, elementum ligula a, vestibulum odio. Quisque sed dapibus lacus. Etiam mollis congue vestibulum. Sed maximus dolor id ligula finibus rutrum.</p>L</div>

            <h4><a href="#box-2" class="collapse-toggle">Box 2</a></h4>
            <div class="collapse-box hide" id="box-2"><p>Nam fringilla velit quis lacus sollicitudin, et molestie orci ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam nec dolor mattis nulla tincidunt posuere id ut elit. Sed eu augue at odio vestibulum convallis. Proin sollicitudin accumsan elit non mattis.</p></div>

            <h4><a href="#box-3" class="collapse-toggle">Box 3</a></h4>
            <div class="collapse-box hide" id="box-3"><p>Maecenas a auctor tellus. Mauris condimentum rutrum pellentesque. Maecenas volutpat id eros at gravida. Sed accumsan magna at congue ultricies. In hac habitasse platea dictumst. Cras efficitur erat sit amet risus iaculis dignissim. Sed et rutrum ante. Praesent maximus erat eu magna tincidunt, elementum molestie nisi lobortis.</p></div>

        </div>

    </div>

    <!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="assets/js/kube.js"></script>

    <script>

      $('#my-collapse').collapse('open');

      $('#my-collapse').collapse('close');

      $('#my-collapse').collapse('openAll');

      $('#my-collapse').collapse('closeAll');

    </script>
</body>
</html>

无法让jQuery在Kube中用于交互式元素

0 个答案: