手风琴JQuery问题
手风琴JQuery问题
提问于 2017-12-14 07:27:24
我是JQuery的新手，我正试图找出我在jquery上做错了什么。它不会表演手风琴效果，我不能让$row[cat_Name]显示和$sub[cat_Name]，但不是作为手风琴(几乎像一个列表，但不是)。我不确定我是否包含了jQuery UI库，或者它是否正确地位于jquery下面。我收到的错误是: TypeError：$(.).accordion不是一个函数
结果是一个主要类别元素( $row[cat_Name] )的列表，$row[cat_Name]下面有subCategroy $sub[cat_Name]元素，但没有隐藏。我做错了什么？我的代码:
<!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>回答 1
Stack Overflow用户
发布于 2017-12-14 08:02:53
我不知道你想达到什么目的，但有简单的方法使用手风琴。下面是一个简单的例子
$( 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插件，它有手风琴设备等等。现在，您可以在div上运行一个foreach循环，并实现您想要的结果。希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47807989
复制相关文章
相似问题
腾讯云开发者
