使用JavaScript和CSS切换内容不工作在Kirby

我正尝试使用我在此处找到的切换代码：http://jsfiddle.net/wGbh5/。它看起来非常直截了当，正是我想要的。使用JavaScript和CSS切换内容不工作在Kirby

所以我有下面的代码在我的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”内容都会显示出来，而且当我点击它们时不会附加任何内容。

任何人都可以帮我解决我的问题吗？

感谢很多提前

来源

2013-03-02 Wiliam

因为你的小提琴作品，一定是有什么在你的页面创建的问题。没有办法调试一些有效的东西。 – RoToRa 2013-03-19 12:29:03

你在页面上包含了jQuery吗？因为你发布的内容在没有它的情况下将不起作用。 – sanjaypoyzer 2013-09-27 16:01:16

它probalby您呼叫您的CSS和JS文件，这是问题的方式。调用与科比一个CSS文件正确的方法是对CSS

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

和JS

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

来源

2017-10-06 10:19:53

使用JavaScript和CSS切换内容不工作在Kirby

回答

相关问题