我正在构建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中还有其他与此问题类似的问题,我已经尝试过,但是仍然会出现相同的错误
预先感谢。
在您的问题中,您编写了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>