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 list, который всплывает в список и запускает ваш код обработчика событий. Вам нужно посмотреть на e.target объект вашего события - иначе говоря, элемент, который вызвал событие, не обязательно тот, на котором оно было зарегистрировано, - и обрабатывает только тот случай, когда эта цель имеет .states учебный класс.

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

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

    // your handler code here

}