jQuery + canJS：點擊嵌套列表來傳播很多

Question

我使用的是canJs 1.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 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> 

正如我所說的，我使用canJS嵌套列表。所以我創建了一個控制器和一個事件：

'.states click': function (el, e) { 

    var stateList = el.find('#stateList'), 
     span = el.find('> span'); 


    if(stateList.is(':hidden')){ 

     span.css({ 
      'background-color':'#fff', 
      'padding-right': 180 - parseInt(span.outerWidth(),10)+parseInt(span.css('padding-right'),10) 
     }); 

     el.find('#stateList').stop().slideDown(); 

    // collapse 
    }else{ 
     el.find('#stateList').stop().slideUp(); 
    } 
    return false; 
} 

如果我點擊.states，將出現隱藏列表。但如果我點擊了嵌套列表中的其中一個複選框，列表也會崩潰。 我該如何防止這種情況？

嵌套列表絕對定位。

這裏是小提琴 http://jsfiddle.net/qYdwR/1017/

Answer 1

嘗試一個更具體的選擇：

'li.states click': function (el, e) { 

你有一些現場的代碼，我們可以看到什麼？

Answer 2

我認爲你的問題與事件冒泡有關。如果您點擊.states列表中的一個子項，該列表將出現在列表中，並觸發您的事件處理程序代碼。您需要查看事件上的e.target對象 - 也就是觸發事件的元素（不一定是註冊事件的元素），並且只處理該對象具有.states類的情況。

'.states click' : function(el, e) { 

    if (!$(e.target).hasClass('.states')) return false; 

    // your handler code here 

}