如果沒有孩子怎么不切換？
[英]if has no child how to not toggle?
問題描述
嗨，我開發了復選框，但我遇到了一些問題。如果我的父母沒有孩子，就不要切換。 我說的是li元素左側的紅色箭頭。
我已經解決了問題，這要歸功於@Arun P Johny，我還要做的另一件事是，當單擊標簽復選框時，僅檢查那些已經生完孩子的豆子。
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
的CSS
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.downCheck:before
{
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
jQuery代碼
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
$(".new-checkbox ul li > * li:has(ul)").addClass("downCheck");
});
2 個解決方案
解決方案1
0 2016-03-15 08:24:26
替換代碼
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li:has(ul)").stop().toggleClass("downCheck");
});
從
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
解決方案2
0 已采納 2016-03-15 08:48:47
您可以使用has-checked類來設置元素的樣式，而無需創建新類
$(document).ready(function() { $('.new-checkbox li:has(ul)').addClass('parent'); $('.new-checkbox input[type=checkbox]').on("change", function() { var checked = this.checked, $li = $(this).parent(); $li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked); $li.parentsUntil('.new-checkbox', 'li').each(function() { var $checks = $(this).find('ul input[type=checkbox]'); $(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length); $(this).toggleClass('has-checked', $checks.is(':checked')); }); }); });
.new-checkbox ul { padding: 0; margin: 0; list-style: none; margin-left: 30px; font: normal 11px/16px"Segoe UI", Arial, Sans-serif; } .new-checkbox ul:first-child { margin-left: 0; } .new-checkbox ul li { margin: 3px 0; } .new-checkbox input[type="checkbox"] { display: none; } .new-checkbox label { cursor: pointer; } .new-checkbox input[type="checkbox"] + label:before { border: 1px solid #ffffff; content: "\\00a0"; display: inline-block; font: 16px/1em sans-serif; height: 13px; width: 13px; margin: 2px .25em 0 0; padding: 0; vertical-align: top; border: solid 1px #1375b3; color: #1375b3; opacity: .50; } .new-checkbox input[type="checkbox"]:checked + label:before { background: #fff; color: #1375b3; content: "\\2714"; text-align: center; box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset; opacity: 1; } .new-checkbox input[type="checkbox"]:checked + label:after { font-weight: bold; } .new-checkbox ul li:before { content: "\\25b6"; display: inline-block; margin: 2px 0 0; width: 13px; height: 13px; vertical-align: top; text-align: center; color: #e74c3c; font-size: 8px; line-height: 13px; cursor: pointer; } li.parent.has-checked:before { content: "\\25bc" !important; display: inline-block; margin: 2px 0 0; width: 13px; height: 13px; vertical-align: top; text-align: center; color: #e74c3c; font-size: 8px; line-height: 13px; cursor: pointer; } /* .new-checkbox ul li:before { content:""; width:16px; height:16px; display:block; float:left; background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center; margin-top: 2px; } li.downCheck:before{ content:""; width:16px; height:16px; display:block; float:left; background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important; margin-top: 2px; } */ .new-checkbox li { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .new-checkbox input[type="checkbox"][id]:checked ~ li::before { content: "\\25bc"; } .new-checkbox li ul { display: none; } .new-checkbox li.has-checked > ul { display: block; }
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script> <div class="new-checkbox"> <ul> <li class="hasUl"> <input type="checkbox" id="input1"> <label for="input1">kategori <strong>(1)</strong> </label> <ul> <li> <input type="checkbox" id="input11"> <label for="input11">kategori<strong>(11)</strong> </label> </li> <li> <input type="checkbox" id="input12"> <label for="input12">kategori <strong>(12)</strong> </label> </li> <li> <input type="checkbox" id="input13"> <label for="input13">kategori <strong>(13)</strong> </label> </li> </ul> </li> <li> <input type="checkbox" id="input2"> <label for="input2">kategori <strong>(2)</strong> </label> </li> <li class="hasUl"> <input type="checkbox" id="input3"> <label for="input3">kategori <strong>(3)</strong> </label> <ul> <li> <input type="checkbox" id="input31"> <label for="input31">kategori <strong>(31)</strong> </label> </li> <li> <input type="checkbox" id="input32"> <label for="input32">kategori <strong>(32)</strong> </label> </li> <li> <input type="checkbox" id="input33"> <label for="input33">kategori <strong>(33)</strong> </label> <ul> <li> <input type="checkbox" id="input331"> <label for="input331">kategori <strong>(331)</strong> </label> </li> <li> <input type="checkbox" id="input332"> <label for="input332">kategori <strong>(332)</strong> </label> </li> <li> <input type="checkbox" id="input333"> <label for="input333">kategori <strong>(333)</strong> </label> </li> </ul> </li> </ul> </li> </ul> </div> <!-- new checkbox-->
如何為子元素應用切換
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.