jQuery+;canJS:单击嵌套列表以进行多次传播
我正在使用CanJS1.1.8和jQuery 我有一个与一些德国州的嵌套列表jQuery+;canJS:单击嵌套列表以进行多次传播,jquery,canjs,canjs-control,Jquery,Canjs,Canjs Control,我正在使用CanJS1.1.8和jQuery 我有一个与一些德国州的嵌套列表 <ul> <li class="states active"> <i class="icon-screenshot"></i> <span style="background-color: rgb(255, 255, 255); padding-right: 79px;">Bundesland</span> <input t
<ul>
<li class="states active">
<i class="icon-screenshot"></i> <span style="background-color: rgb(255, 255, 255); padding-right: 79px;">Bundesland</span>
<input type="radio" value="state" name="location" class="hidden" checked="checked">
<ul class="hidden" id="stateList" style="display: none;">
<li><label class="checkbox"><div class="icheckbox_minimal-gray checked" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="1" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Baden-Württemberg</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="2" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Bayern</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="3" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Berlin</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="4" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Brandenburg</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray checked" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="5" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Bremen</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray checked" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="6" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Hamburg</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="7" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Hessen</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="8" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Mecklenburg-Vorpommern</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="9" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Niedersachsen</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="10" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Nordrhein-Westfalen</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="11" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Rheinland-Pfalz</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="12" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Saarland</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="13" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Sachsen</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="14" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Sachsen-Anhalt</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="15" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Schleswig-Holstein</label></li>
<li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="16" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Thüringen</label></li>
</ul>
</li>
</ul>
如果单击.states,将显示隐藏列表。但是,如果我单击嵌套列表中的一个复选框,列表也会崩溃。
我怎样才能防止这种情况
嵌套列表是绝对定位的
这是小提琴
尝试更具体的选择器:
'li.states click': function (el, e) {
您有一些我们可以看到的实时代码吗?我认为您的问题与事件冒泡有关。若您单击
.states
列表的子级,则会弹出列表,并触发事件处理程序代码。您需要查看事件上的e.target
对象——aka,触发事件的元素,不一定是注册事件的元素——并且只处理目标具有.states
类的情况
'.states click' : function(el, e) {
if ( !$(e.target).hasClass('.states') ) return false;
// your handler code here
}
'.states click' : function(el, e) {
if ( !$(e.target).hasClass('.states') ) return false;
// your handler code here
}