jquery - 使用 JavaScript 和 CSS 切换内容在 Kirby 中不起作用

Question

我正在尝试使用我在这里找到的切换代码:http://jsfiddle.net/wGbh5/ 。它看起来非常简单，而且正是我想要的。

所以我的 style.css 文件中有以下代码:

.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;}

.clickme:hover {
    text-decoration: underline;
}

然后我创建了一个包含以下代码的 toggle.js 文件:

// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

我在 html 中使用标题中的行调用这两个文件

<link rel="stylesheet" href="http://localhost:8888/kirby/assets/styles/styles.css" />
<script src="http://localhost:8888/kirby/assets/js/toggle.js"></script>

正如您在链接中看到的，我正在本地使用 MAMP 工作并尝试 CMS Kirby .

在 HTML 文件中，代码如下所示:

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type
</div>

问题是，当我在浏览器中加载 html 文件时，它不起作用(如果它正常工作，我会在这里吗？)。当我点击它们时，“clickme”和“box”内容都会显示，并且不会附加任何内容。

谁能帮我解决我的问题吗？

提前非常感谢

Answer 1

这可能是您调用 css 和 js 文件的方式造成的问题。使用 kirby 调用 css 文件的正确方法是对于 CSS

<?php echo css('assets/styles/styles.css') ?> 

对于js

<?php echo js('assets/js/toogle.js') ?>