i have some code for show a tree with list, and i need 2 button for expand and collapsed all of tree items, this button work correctly but have problem when i clicked on checkbox in my
- tag,after that 2 button note work**`strong
if you check result code and use expand and collapse button you find my aim about problem
at first this button work very vell but when we clicked on checkbox,after that buttons not work at all
$(function () {
//expand-collapse
$("#tree-collapse-all").click(function(){
$(".tree input").removeAttr("checked");
});
$("#tree-expand-all").click(function(){
$(".tree input").attr("checked","checked");
});
});
//# sourceURL=pen.js
ol,ul{
margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;
list-style:none;
}
body {
margin: 30px;
font-family: sans-serif;
}
#fontSizeWrapper { font-size: 16px; }
#fontSize {
width: 100px;
font-size: 1em;
}
/* ————————————————————–
Tree core styles
*/
.tree { margin: 1em; }
.tree input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.tree input ~ ul { display: none; }
.tree input:checked ~ ul { display: block; }
/* ————————————————————–
Tree rows
*/
.tree li {
line-height: 1.2;
position: relative;
padding: 0 0 1em 1em;
}
.tree ul li { padding: 1em 0 0 1em; }
.tree > li:last-child { padding-bottom: 0; }
/* ————————————————————–
Tree labels
*/
.tree_label {
position: relative;
display: inline-block;
background: #fff;
}
label.tree_label { cursor: pointer; }
label.tree_label:hover { color: #666; }
/* ————————————————————–
Tree expanded icon
*/
label.tree_label:before {
background: #000;
color: #fff;
position: relative;
z-index: 1;
float: left;
margin: 0 1em 0 -2em;
width: 1em;
height: 1em;
border-radius: 1em;
content: '+';
text-align: center;
line-height: .9em;
}
:checked ~ label.tree_label:before { content: '–'; }
/* ————————————————————–
Tree branches
*/
.tree li:before {
position: absolute;
top: 0;
bottom: 0;
left: -.5em;
display: block;
width: 0;
border-left: 1px solid rgb(7, 240, 112);
content: "";
}
.tree_label:after {
position: absolute;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid rgb(79, 7, 247);
border-left: 1px solid rgb(240, 6, 6);
border-radius: 0 0 0 .3em;
content: '';
}
label.tree_label:after { border-bottom: 0; }
:checked ~ label.tree_label:after {
border-radius: 0 .3em 0 0;
border-top: 1px solid rgb(79, 7, 247);
border-right: 1px solid rgb(240, 6, 6);
border-bottom: 0;
border-left: 0;
bottom: 0;
top: 0.5em;
height: auto;
}
.tree li:last-child:before {
height: 1em;
bottom: auto;
}
.tree > li:last-child:before { display: none; }
.tree_custom {
display: block;
background: #eee;
padding: 1em;
border-radius: 0.3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body translate="no">
<p><a href="#" id="tree-expand-all">Expand all</a> | <a href="#" id="tree-collapse-all">Collapse all</a></p>
<br /><br />
<div id="fontSizeWrapper">
<label for="fontSize">Font size</label>
<input type="range" value="1" id="fontSize" step="0.5" min="0.5" max="5" />
</div>
<ul class="tree">
<li>
<input type="checkbox" id="c1" />
<label class="tree_label" for="c1">Level 0</label>
<ul>
<li>
<input type="checkbox" id="c2" />
<label for="c2" class="tree_label">Level 1</label>
<ul>
<li><span class="tree_label">Level 2</span></li>
<li><span class="tree_label">Level 2</span></li>
</ul>
</li>
<li>
<input type="checkbox" id="c3" />
<label for="c3" class="tree_label">Looong level 1 <br />label text <br />with line-breaks</label>
<ul>
<li><span class="tree_label">Level 2</span></li>
<li>
<input type="checkbox" id="c4" />
<label for="c4" class="tree_label"><span class="tree_custom">Specified tree item view</span></label>
<ul>
<li><span class="tree_label">Level 3</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="c5" />
<label class="tree_label" for="c5">Level 0</label>
<ul>
<li>
<input type="checkbox" id="c6" />
<label for="c6" class="tree_label">Level 1</label>
<ul>
<li><span class="tree_label">Level 2</span></li>
</ul>
</li>
<li>
<input type="checkbox" id="c7" />
<label for="c7" class="tree_label">Level 1</label>
<ul>
<li><span class="tree_label">Level 2</span></li>
<li>
<input type="checkbox" id="c8" />
<label for="c8" class="tree_label">Level 2</label>
<ul>
<li><span class="tree_label">Level 3</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
text`**
Aucun commentaire:
Enregistrer un commentaire