为什么这架手风琴不会倒塌？
Why wont this accordion collapse?
我认为有以下手风琴。
我无法让它折叠，我认为它的默认行为是折叠的。
（当我 运行 它来自 visual studio 时，它会检查所有子项目，但从这里开始，它不会。）
手风琴行为的标记是使用 C# 在操作中生成的。
谢谢
<html>
<head>
<style>
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 25px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover + ul li a {
background: #dd4814;
color: #ffffff;
border: 1px solid #dd4814;
}
/*Connector styles on hover*/
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
border-color: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
border: none;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 37px;
width: 34px;
border: none;
}
*:before, *:after {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}
li {
display: inline-block;
vertical-align: top;
width: 90%;
}
li {
display: inline-block;
vertical-align: top;
width: 90%;
}
b {
width: 10%;
display: block;
}
</style>
</head>
<body>
<div class="panel panel-default" style="border: currentColor; border-image: none; height: 1800px; ">
<div class="panel-heading panel-head" style="border: currentColor; border-image: none; width: 400px; height: 40px; background-color: gainsboro;">Security Permissions</div>
<div class="panel-body" id="Permissions" style="border: currentColor; border-image: none; width: 400px; height: 1800px; background-color: ghostwhite;">
<form action="/Security/Index" method="post">
<div class="tree" style="border: currentColor; border-image: none; height: 1200px; ">
<ul class="nav nav-list" style="border: currentColor; border-image: none;">
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Psubmenu_1" data-toggle="collapse">
<span class="pull-left">
<input name="MM_IsPermitted1" class="MMtree-checkbox" id="MM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="MM_IsPermitted1" type="hidden" value="false">
</span>
Admin
</span>
<ul class="nav nav-list collapse" id="Psubmenu_1" style="padding-left: 20px;">
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#submenu_1" data-toggle="collapse">
<input name="SM_IsPermitted1" class="subtree-checkbox" id="SM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted1" type="hidden" value="false">
Debtors-Creditors
</span>
</li>
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Ssubmenu_1" data-toggle="collapse">
<input name="SM_IsPermitted1" class="subtree-checkbox" id="SM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted1" type="hidden" value="false">
Users
</span>
<ul class="nav nav-list collapse" id="Ssubmenu_1" style="padding-left: 40px;">
<li>
<span class="accordion-heading" data-target="#Ssubmenu_11" data-toggle="collapse">
<input name="SM_IsPermitted10" class="subtree-checkbox" id="SM_IsPermitted10" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted10" type="hidden" value="false">
new subby tst3
</span>
</li>
</ul>
</li>
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Ssubmenu_1" data-toggle="collapse">
<input name="SM_IsPermitted1" class="subtree-checkbox" id="SM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted1" type="hidden" value="false">
Contacts
</span>
</li>
</ul>
</li>
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Psubmenu_2" data-toggle="collapse">
<span class="pull-left">
<input name="MM_IsPermitted2" class="MMtree-checkbox" id="MM_IsPermitted2" type="checkbox" value="false" iid="2">
<input name="MM_IsPermitted2" type="hidden" value="false">
</span>
Home
</span>
<ul class="nav nav-list collapse" id="Psubmenu_2" style="padding-left: 20px;"></ul>
</li>
</ul>
</div>
<div class="form-group">
<div class="col-lg-9"></div>
<div class="col-lg-3">
<button class="btn btn-success" id="btnSubmit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function ()
{
$("#accordion-heading").accordion({
heightStyle: "content",
collapsible: true,
//Set the active accordion tab to none
active: 'none'
})
$(".subtree-checkbox").click(function (e)
{
//prevent the accordion collapse behaviour on the sub levels
e.stopPropagation();
});
$(".MMtree-checkbox").click(function (e)
{
e.preventDefault();
var itemId = $(this).attr("iid");
var ischecked = $(this).prop('checked');
//CheckAllChildren();
//checkbox is an input,..find all inputs with iid matching that of the checked/clicked on checkbox
var abc = $('input[iid^=' + itemId + ']');
var txt = "";
$(abc).each(function (index, element)
{
txt = element.id + txt; //shows all the inputs with the name(text) where iid = the iid of the clicked on Checkbox input
$(this).prop("checked", ischecked);
});
});
});
</script>
</body>
</html>
在您的代码中添加以下行
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
这将解决您的问题。如果它解决了您的问题，则标记为答案。
我认为有以下手风琴。 我无法让它折叠，我认为它的默认行为是折叠的。 （当我 运行 它来自 visual studio 时，它会检查所有子项目，但从这里开始，它不会。）
手风琴行为的标记是使用 C# 在操作中生成的。 谢谢
<html>
<head>
<style>
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 25px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover + ul li a {
background: #dd4814;
color: #ffffff;
border: 1px solid #dd4814;
}
/*Connector styles on hover*/
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
border-color: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
border: none;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 37px;
width: 34px;
border: none;
}
*:before, *:after {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}
li {
display: inline-block;
vertical-align: top;
width: 90%;
}
li {
display: inline-block;
vertical-align: top;
width: 90%;
}
b {
width: 10%;
display: block;
}
</style>
</head>
<body>
<div class="panel panel-default" style="border: currentColor; border-image: none; height: 1800px; ">
<div class="panel-heading panel-head" style="border: currentColor; border-image: none; width: 400px; height: 40px; background-color: gainsboro;">Security Permissions</div>
<div class="panel-body" id="Permissions" style="border: currentColor; border-image: none; width: 400px; height: 1800px; background-color: ghostwhite;">
<form action="/Security/Index" method="post">
<div class="tree" style="border: currentColor; border-image: none; height: 1200px; ">
<ul class="nav nav-list" style="border: currentColor; border-image: none;">
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Psubmenu_1" data-toggle="collapse">
<span class="pull-left">
<input name="MM_IsPermitted1" class="MMtree-checkbox" id="MM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="MM_IsPermitted1" type="hidden" value="false">
</span>
Admin
</span>
<ul class="nav nav-list collapse" id="Psubmenu_1" style="padding-left: 20px;">
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#submenu_1" data-toggle="collapse">
<input name="SM_IsPermitted1" class="subtree-checkbox" id="SM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted1" type="hidden" value="false">
Debtors-Creditors
</span>
</li>
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Ssubmenu_1" data-toggle="collapse">
<input name="SM_IsPermitted1" class="subtree-checkbox" id="SM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted1" type="hidden" value="false">
Users
</span>
<ul class="nav nav-list collapse" id="Ssubmenu_1" style="padding-left: 40px;">
<li>
<span class="accordion-heading" data-target="#Ssubmenu_11" data-toggle="collapse">
<input name="SM_IsPermitted10" class="subtree-checkbox" id="SM_IsPermitted10" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted10" type="hidden" value="false">
new subby tst3
</span>
</li>
</ul>
</li>
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Ssubmenu_1" data-toggle="collapse">
<input name="SM_IsPermitted1" class="subtree-checkbox" id="SM_IsPermitted1" type="checkbox" value="false" iid="1">
<input name="SM_IsPermitted1" type="hidden" value="false">
Contacts
</span>
</li>
</ul>
</li>
<li>
<span class="accordion-heading" aria-expanded="false" data-target="#Psubmenu_2" data-toggle="collapse">
<span class="pull-left">
<input name="MM_IsPermitted2" class="MMtree-checkbox" id="MM_IsPermitted2" type="checkbox" value="false" iid="2">
<input name="MM_IsPermitted2" type="hidden" value="false">
</span>
Home
</span>
<ul class="nav nav-list collapse" id="Psubmenu_2" style="padding-left: 20px;"></ul>
</li>
</ul>
</div>
<div class="form-group">
<div class="col-lg-9"></div>
<div class="col-lg-3">
<button class="btn btn-success" id="btnSubmit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function ()
{
$("#accordion-heading").accordion({
heightStyle: "content",
collapsible: true,
//Set the active accordion tab to none
active: 'none'
})
$(".subtree-checkbox").click(function (e)
{
//prevent the accordion collapse behaviour on the sub levels
e.stopPropagation();
});
$(".MMtree-checkbox").click(function (e)
{
e.preventDefault();
var itemId = $(this).attr("iid");
var ischecked = $(this).prop('checked');
//CheckAllChildren();
//checkbox is an input,..find all inputs with iid matching that of the checked/clicked on checkbox
var abc = $('input[iid^=' + itemId + ']');
var txt = "";
$(abc).each(function (index, element)
{
txt = element.id + txt; //shows all the inputs with the name(text) where iid = the iid of the clicked on Checkbox input
$(this).prop("checked", ischecked);
});
});
});
</script>
</body>
</html>
在您的代码中添加以下行
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
这将解决您的问题。如果它解决了您的问题，则标记为答案。