我是jquery的新手，我想弄清楚我在使用JQuery做错了什么。它不会执行手风琴效果，我无法显示 $row[cat_Name] 和 $sub[cat_Name] ，但不能作为手风琴（几乎像列表但没有）。我不确定我是否包含了jQuery UI库，或者它是否正确地位于jquery库之下。我收到的错误是：TypeError：$（...）。accordion不是函数
结果是主要类别元素 $row[cat_Name] 的列表， $sub[cat_Name] <下方的子类别 $row[cat_Name] 元素/ strong>但不隐藏。我究竟做错了什么？
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop Homepage - Start Bootstrap Template</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" />
<!--jQuery code-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- <link
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href = "font-awesome-4.7.0/css/font-awesome.min.css " rel="stylesheet" type="text/css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src= "typeahead.min.js"></script>
<script type="text/javascript"></script>
<script>
$( function() {
$( "#accordion" ).accordion({
collapsible: true
});
} );
</script>
<style>
.sideBar{
float: left;
}
ul {
list-style-type: none;
}
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #ff2727;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
</style>
<div class = "navbar-default sidebar" role= "navigation">
<div class="sidebar-nav navbar-collapse">
<div id = "accordion">
<?php
$database = new DB();
$query = "select * from category where cat_SubCat IS NULL";
$rows = $database->get_results($query);
foreach ($rows as $row)
{
echo "<h3><a href='#' class='list-group-item'>" . $row[cat_Name] . "</a>
</h3>";
$query2 = "select * from category where cat_SubCat= $row[cat_ID]";
$subs = $database->get_results($query2);
foreach ($subs as $sub)
{
echo "<p><a href='#' class='list-group-item'>" . $sub[cat_Name] . "
</a></p>";
}
}
?>
</div>
</div>
</div>
答案 0 :(得分：0)
我不确定你想要实现的目标，但是使用手风琴的方法很简单。这是一个简单的例子
$( function() {
$( "#accordion" ).accordion({
collapsible: true
});
} );<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id = "accordion">
<?php
$database = new DB();
$query = "select * from category where cat_SubCat IS NULL";
$rows = $database->get_results($query);
foreach ($rows as $row)
{
echo "<h3><a href='#' class='list-group-item'>" . $row[cat_Name] . "</a>
</h3>";
$query2 = "select * from category where cat_SubCat= $row[cat_ID]";
$subs = $database->get_results($query2);
foreach ($subs as $sub)
{
echo "<p><a href='#' class='list-group-item'>" . $sub[cat_Name] . "
</a></p>";
}
}
?>
</div>
这里我使用的是jquery-ui插件，它有手风琴设备等等。现在，您可以在div上运行foreach循环，并获得您想要的结果。希望这对你有所帮助。