我有一个无序的列表，我想要在父级上展开和折叠，而不是在其子级上。由于缺乏一个更好的术语，这个列表只有孩子而没有孙子，所以没有必要扩展或崩溃到那个级别。
目前，在此示例中，当我单击箭头或文本时，父级会折叠并展开，这正是我想要的行为。但是，当单击其中一个子复选框时，这也会导致父级崩溃。这不是理想的效果。另外，请注意选中复选框文本与复选框本身时的行为差异。我实际上想要在选中复选框（包含标签）时启动一些额外的javascript，我将在稍后添加。
$(document).ready(function () {
$('#main li ul').hide();
$('#colorsec').find('UL').show();
$('#coldiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.colopen, .colclosed').toggleClass('colopen colclosed');
});
$('#proddiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.prodopen, .prodclosed').toggleClass('prodopen prodclosed');
});
$('#graindiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.grainopen, .grainclosed').toggleClass('grainopen grainclosed');
});
$('#findiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.finopen, .finclosed').toggleClass('finopen finclosed');
});
}); #page-wrap ul li ul {
display: none;
}
/* This removes the defaul image for the list item */
#page-wrap > ul > li {
list-style: none;
}
/* This removes the image we put on the list item above */
#sublists {
list-style: none;
cursor: pointer;
margin-left: -2em;
}
#main {
font-family: HelveticaNeueLT-Medium, Museo-500, Helvetica, Arial, sans-serif;
}
.custom-checked {
font-family: HelveticaNeueLT-Light, Museo-500, Helvetica, Arial, sans-serif;
}
#main {
cursor: pointer;
}
#colorsec.colopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#colorsec.colclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#productsec.prodopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#productsec.prodclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#grainsec.grainopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#grainsec.grainclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#finsec.finopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#finsec.finclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="page-wrap">
<ul id="main">
<div id="coldiv">
<li id="colorsec" class="colopen">Color
<ul id="sublists">
<li>
<input type='checkbox' name='Red' id='Red' class='color_cb' checked>
<label for='Red' class='custom-checked'>Red</label>
</li>
<li>
<input type='checkbox' name='Orange' id='Orange' class='color_cb' checked>
<label for='Orange' class='custom-checked'>Orange</label>
</li>
<li>
<input type='checkbox' name='Brown' id='Brown' class='color_cb' checked>
<label for='Brown' class='custom-checked'>Brown</label>
</li>
<li>
<input type='checkbox' name='Beige' id='Beige' class='color_cb' checked>
<label for='Beige' class='custom-checked'>Beige</label>
</li>
<li>
<input type='checkbox' name='White' id='White' class='color_cb' checked>
<label for='White' class='custom-checked'>White</label>
</li>
<li>
<input type='checkbox' name='Off_White' id='Off_White' class='color_cb' checked>
<label for='Off_White' class='custom-checked'>Off White</label>
</li>
<li>
<input type='checkbox' name='Pink' id='Pink' class='color_cb' checked>
<label for='Pink' class='custom-checked'>Pink</label>
</li>
<li>
<input type='checkbox' name='Purple' id='Purple' class='color_cb' checked>
<label for='Purple' class='custom-checked'>Purple</label>
</li>
<li>
<input type='checkbox' name='Grey' id='Grey' class='color_cb' checked>
<label for='Grey' class='custom-checked'>Grey</label>
</li>
<li>
<input type='checkbox' name='Black' id='Black' class='color_cb' checked>
<label for='Black' class='custom-checked'>Black</label>
</li>
<li>
<input type='checkbox' name='Blue' id='Blue' class='color_cb' checked>
<label for='Blue' class='custom-checked'>Blue</label>
</li>
<li>
<input type='checkbox' name='Green' id='Green' class='color_cb' checked>
<label for='Green' class='custom-checked'>Green</label>
</li>
<li>
<input type='checkbox' name='Yellow' id='Yellow' class='color_cb' checked>
<label for='Yellow' class='custom-checked'>Yellow</label>
</li>
</ul>
</li>
</div>
<div id="proddiv">
<li id="productsec" class="prodclosed">Product
<ul>
<li><span>Andes</span>
</li>
<li><span>Sabrina</span>
</li>
<li><span>Volo</span>
</li>
<li><span>Ducale</span>
</li>
<li><span>Marissa</span>
</li>
</ul>
</li>
</div>
<div id="graindiv">
<li id="grainsec" class="grainclosed">Grain
<ul>
<li><span>Raised</span>
</li>
<li><span>Full</span>
</li>
<li><span>Flat</span>
</li>
<li><span>Pronounced</span>
</li>
<li><span>Corrected</span>
</li>
</ul>
</li>
</div>
<div id="findiv">
<li id="finsec" class="finclosed">Finish
<ul>
<li><span>None</span>
</li>
<li><span>Light</span>
</li>
<li><span>Light Waxy</span>
</li>
<li><span>Pebble</span>
</li>
<li><span>Heavy</span>
</li>
</ul>
</li>
</div>
</ul>
</div>
答案 0 :(得分：0)
您可以使用stopPropagation来防止不必要的行为。如果需要，它仍然允许您在这些元素上添加行为。参见：
$(document).ready(function () {
$('#main li ul').hide();
$('#colorsec').find('UL').show();
$('#coldiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.colopen, .colclosed').toggleClass('colopen colclosed');
});
$('#proddiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.prodopen, .prodclosed').toggleClass('prodopen prodclosed');
});
$('#graindiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.grainopen, .grainclosed').toggleClass('grainopen grainclosed');
});
$('#findiv li').click(function () {
$(this).children('ul').slideToggle("fast");
$('.finopen, .finclosed').toggleClass('finopen finclosed');
});
$('input, label, li span').click(function(e){
e.stopPropagation()
});
});#page-wrap ul li ul {
display: none;
}
/* This removes the defaul image for the list item */
#page-wrap > ul > li {
list-style: none;
}
/* This removes the image we put on the list item above */
#sublists {
list-style: none;
cursor: pointer;
margin-left: -2em;
}
#main {
font-family: HelveticaNeueLT-Medium, Museo-500, Helvetica, Arial, sans-serif;
}
.custom-checked {
font-family: HelveticaNeueLT-Light, Museo-500, Helvetica, Arial, sans-serif;
}
#main {
cursor: pointer;
}
#colorsec.colopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#colorsec.colclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#productsec.prodopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#productsec.prodclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#grainsec.grainopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#grainsec.grainclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#finsec.finopen {
list-style-image: url('http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#finsec.finclosed {
list-style-image: url('http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="page-wrap">
<ul id="main">
<div id="coldiv">
<li id="colorsec" class="colopen">Color
<ul id="sublists">
<li>
<input type='checkbox' name='Red' id='Red' class='color_cb' checked>
<label for='Red' class='custom-checked'>Red</label>
</li>
<li>
<input type='checkbox' name='Orange' id='Orange' class='color_cb' checked>
<label for='Orange' class='custom-checked'>Orange</label>
</li>
<li>
<input type='checkbox' name='Brown' id='Brown' class='color_cb' checked>
<label for='Brown' class='custom-checked'>Brown</label>
</li>
<li>
<input type='checkbox' name='Beige' id='Beige' class='color_cb' checked>
<label for='Beige' class='custom-checked'>Beige</label>
</li>
<li>
<input type='checkbox' name='White' id='White' class='color_cb' checked>
<label for='White' class='custom-checked'>White</label>
</li>
<li>
<input type='checkbox' name='Off_White' id='Off_White' class='color_cb' checked>
<label for='Off_White' class='custom-checked'>Off White</label>
</li>
<li>
<input type='checkbox' name='Pink' id='Pink' class='color_cb' checked>
<label for='Pink' class='custom-checked'>Pink</label>
</li>
<li>
<input type='checkbox' name='Purple' id='Purple' class='color_cb' checked>
<label for='Purple' class='custom-checked'>Purple</label>
</li>
<li>
<input type='checkbox' name='Grey' id='Grey' class='color_cb' checked>
<label for='Grey' class='custom-checked'>Grey</label>
</li>
<li>
<input type='checkbox' name='Black' id='Black' class='color_cb' checked>
<label for='Black' class='custom-checked'>Black</label>
</li>
<li>
<input type='checkbox' name='Blue' id='Blue' class='color_cb' checked>
<label for='Blue' class='custom-checked'>Blue</label>
</li>
<li>
<input type='checkbox' name='Green' id='Green' class='color_cb' checked>
<label for='Green' class='custom-checked'>Green</label>
</li>
<li>
<input type='checkbox' name='Yellow' id='Yellow' class='color_cb' checked>
<label for='Yellow' class='custom-checked'>Yellow</label>
</li>
</ul>
</li>
</div>
<div id="proddiv">
<li id="productsec" class="prodclosed">Product
<ul>
<li><span>Andes</span>
</li>
<li><span>Sabrina</span>
</li>
<li><span>Volo</span>
</li>
<li><span>Ducale</span>
</li>
<li><span>Marissa</span>
</li>
</ul>
</li>
</div>
<div id="graindiv">
<li id="grainsec" class="grainclosed">Grain
<ul>
<li><span>Raised</span>
</li>
<li><span>Full</span>
</li>
<li><span>Flat</span>
</li>
<li><span>Pronounced</span>
</li>
<li><span>Corrected</span>
</li>
</ul>
</li>
</div>
<div id="findiv">
<li id="finsec" class="finclosed">Finish
<ul>
<li><span>None</span>
</li>
<li><span>Light</span>
</li>
<li><span>Light Waxy</span>
</li>
<li><span>Pebble</span>
</li>
<li><span>Heavy</span>
</li>
</ul>
</li>
</div>
</ul>
</div>