将小提琴代码集成到布局中

时间:2012-04-12 15:20:38

标签: javascript html css jsfiddle

在名为Michael的Stack Overflow用户的帮助下,我能够让这个jsFiddle部门正确地下拉。但是,当我尝试实现JavaScript,CSS和HTML时,甚至只使用jsFiddle代码进入一个新目录时,我无法通过单击来降低分区。实际上,它根本不会显示内容部门。我做错了什么?

我猜我必须以某种方式错误地实现JavaScript代码。

jsFiddle是http://jsfiddle.net/WeL6j/12/

$(function() {
    $('.action').click(function() {
        var content = $(this).find('~ .content');
        $(this).parent().parent().find('.content').not(content).hide('fast');
        content.slideToggle('fast');
    });
});

1 个答案:

答案 0 :(得分:0)

你需要在使用它之前包含jQuery ...确保这是一个很好的方法来放置包含jQuery的<script>标记之前你编码。或者,您可以在</body> read more

之前将代码移至正文的底部
<head>
<title></title>

<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
<div id="container"><ul>
    <li>
        <a href="#" class="action">summer</a>
        <div class="content">
            <a href="link">june</a>
            <a href="link">july</a>
        </div>
    </li>
    <li>
        <a href="#" class="action">winter</a>
        <div class="content">
            <a href="link">november</a>
            <a href="link">december</a>
        </div>
    </li>
    <li>
        <a href="#" class="action">weather</a>
        <div class="content">
            <a href="link">rain</a>
            <a href="link">sun</a>
        </div>
    </li>
    </ul></div><br>
<div id="div">
    </div>
<script type="text/javascript">
//$(function() { // ooo looky, i'm not actually needed now!
    $('.action').click(function() {
        var content = $(this).find('~ .content');
        $(this).parent().parent().find('.content').not(content).hide('fast');
        content.slideToggle('fast');
    });
//});?
</script>
</body>