Question

我有这个例子jsfiddle

HTML

<div class="container_he">
    <div class="header_he"><span>Expand</span>

    </div>
    <div class="content_he">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

的Javascript

$(".header_he").click(function () {

    $header_he = $(this);
    //getting the next element
    $content_he = $header_he.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content_he.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header_he.text(function () {
            //change text based on condition
            return $content_he.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

CSS

.container_he {
    width:100%;
    border:1px solid #d3d3d3;
}

.container_he div {
    width:100%;
}
.container_he .header_he {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container_he .content_he {
    display: none;
    padding : 5px;
}

它完美无缺。但是，当我想在我的网站上发布时，它不会扩展到任何点击它。

这是我的网站链接。 http://darbs.ecotechno.lv/en/products

什么可能导致此错误？一些其他div元素阻止扩展？感谢

Answer 1

您正尝试将fancybox和应用程序脚本包含在页面顶部，因为在此之前您还没有包含jQuery Library，因此它会导致脚本崩溃，因此无法正常工作。

您需要在其他2个脚本之前将以下内容添加到您的页面中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

一个好的建议是使用像Chrome这样的体面浏览器并按f12。您将能够访问js控制台，它将为您提供发生的任何错误的列表

Answer 2

首先修复你的fancybox错误 - TypeError：$（...）。fancybox不是一个函数。这也可能导致问题

Answer 3

我找到了$（...）。在查看您的网站时，fancybox不是一个功能。这会导致脚本中断

点击不工作时展开div

3 个答案: