Uncaught TypeError:$(...)。sidebar不是函数

问题描述 投票:0回答:1

我正在构建laravel应用程序的布局,但出现一些我无法理解的错误。边栏和其他组件未加载。我得到错误:Uncaught TypeError: jQuery(...).sidebar is not a function。这会发生在其他组件(下拉菜单/手风琴)上,页面加载后,chrome dev工具会显示下拉菜单和手风琴错误,仅当我尝试打开侧边栏时才会显示侧边栏错误。

之所以将laravel包含在标签中,是因为我已经测试了另一个文件夹中(laravel结构之外)的布局完全相同,并且可以正常工作。我不确定laravel是否会处理视图。

我正在加载的脚本在<head>中:

<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<script scr="{{ asset('semantic/semantic.min.js') }}"></script>

<body>的结尾

    <script type="text/javascript">
        jQuery('#menu').click(function(){
            $('.ui.sidebar').sidebar('toggle');
        }); 
    </script> 

    <script type="text/javascript">
        jQuery('.ui.accordion').accordion({
            selector: {
            }
        });
    </script>
    <script type="text/javascript">
        jQuery(".ui.dropdown").dropdown({
            allowCategorySelection: true,
            transition: "fade up",
            context: 'sidebar',
            on: "click"
        });
    </script>

这是边栏的代码:

<div class="ui sidebar vertical left inverted menu" id="sidebar">
        <br>
        <div class="ui inverted accordion" style="padding-left: 10px">
            <div class="title item">Tasks<i class="dropdown icon"></i></div>
            <div class="content">
                <a class="small item" href="">My Tasks<i class="ui tasks icon"></i></a>
                <a class="small item" href="">Task Overview<i class="ui globe icon"></i> </a>
                <a class="small item" href="">New task<i class="ui plus icon"></i></a>
            </div>
        </div>
        <br>
        <div class="ui inverted large accordion" style="padding-left: 10px">
            <div class="title item">Reports<i class="dropdown icon"></i></div>
            <div class="content">
                <a class="item" href="">Reports<i class="bar chart icon"></i></a>
            </div>
        </div>
...

我尝试使用不同版本的jquery并更改jquery和语义.js的加载顺序。

在stackoverflow中还有其他与此问题类似的问题,我已经尝试过,但是仍然会出现相同的错误

预先感谢。

jquery laravel semantic-ui
1个回答
0
投票

在您的问题中,您编写了3个脚本。您可以将所有这些脚本写在一个脚本中,然后在加载DOM之后执行它们。像这样:

<script type="text/javascript">
    $(document).ready(function(){
        $('#menu').click(function(){
            $('.ui.sidebar').sidebar('toggle');
        });
        $('.ui.accordion').accordion({
            selector: {}
        });
        $(".ui.dropdown").dropdown({
            allowCategorySelection: true,
            transition: "fade up",
            context: 'sidebar',
            on: "click"
        });
    });
</script>
© www.soinside.com 2019 - 2024. All rights reserved.