JQuery Скрыть и показать элементы с добавить удалить класс

Question

Помощи ребят,

Я создаю Jquery вещь,

Существует группа родительского флажка, каждый флажок имеет ребенок флажок. флажок child был установлен для отображения: none.

Когда вы нажмете на один родительский флажок, он покажет дочерний флажок.

но если вы установите флажок другой родительский флажок, другой флажок, который в настоящее время показывает дочерний элемент, он должен снова скрыться.

здесь, если мой код ..

<ul id="testdrive"> 
    <li class=" parent-1" id="the_id_1">CBD 
    <input type="checkbox" class="events-category" id="" value="CBD" name="CBD"> 
    <ul style="display: none;" class="child-list"> 
     <li class="CBD-town-7" id="town-7">Town 7 
     <label>Town 7 
      <input type="checkbox" value="Town 7" name="Town 7"> 
     </label> 
     </li> 
     <li class="CBD-town-8" id="town-8">Town 8 
     <label>Town 8 
      <input type="checkbox" value="Town 8" name="Town 8"> 
     </label> 
     </li> 
    </ul> 
    </li> 
    <li class=" parent-2" id="the_id_2">Din-Dins 
    <input type="checkbox" class="events-category" id="" value="Din-Dins" name="Din-Dins"> 
    <ul style="display: none;" class="child-list"> 
     <li class="Din-Dins-town-11" id="town-11">Town 11 
     <label>Town 11 
      <input type="checkbox" value="Town 11" name="Town 11"> 
     </label> 
     </li> 
     <li class="Din-Dins-town-12" id="town-12">Town 12 
     <label>Town 12 
      <input type="checkbox" value="Town 12" name="Town 12"> 
     </label> 
     </li> 
    </ul> 
    </li> 
    <li class=" parent-3" id="the_id_3">East 
    <input type="checkbox" class="events-category" id="" value="East" name="East"> 
    <ul style="display: none;" class="child-list"> 
     <li class="East-town-3" id="town-3">Town 3 
     <label>Town 3 
      <input type="checkbox" value="Town 3" name="Town 3"> 
     </label> 
     </li> 
     <li class="East-town-4" id="town-4">Town 4 
     <label>Town 4 
      <input type="checkbox" value="Town 4" name="Town 4"> 
     </label> 
     </li> 
    </ul> 
    </li> 
    <li class=" parent-4" id="the_id_4">North 
    <input type="checkbox" class="events-category" id="" value="North" name="North"> 
    <ul style="display:none;" class="child-list"> 
     <li class="North-suburb-1" id="suburb-1">Suburb 1 
     <label>Suburb 1 
      <input type="checkbox" value="Suburb 1" name="Suburb 1"> 
     </label> 
     </li> 
     <li class="North-suburb-2" id="suburb-2">Suburb 2 
     <label>Suburb 2 
      <input type="checkbox" value="Suburb 2" name="Suburb 2"> 
     </label> 
     </li> 
    </ul> 
    </li> 
    <li class=" parent-5" id="the_id_5">Out of Town 
    <input type="checkbox" class="events-category" id="" value="Out of Town" name="Out of Town"> 
    <ul style="display:none;" class="child-list"> 
     <li class="Out of Town-town-10" id="town-10">Town 10 
     <label>Town 10 
      <input type="checkbox" value="Town 10" name="Town 10"> 
     </label> 
     </li> 
     <li class="Out of Town-town-9" id="town-9">Town 9 
     <label>Town 9 
      <input type="checkbox" value="Town 9" name="Town 9"> 
     </label> 
     </li> 
    </ul> 
    </li> 
    <li class=" parent-6" id="the_id_6">South 
    <input type="checkbox" class="events-category" id="" value="South" name="South"> 
    <ul style="display:none;" class="child-list"> 
     <li class="South-town-1" id="town-1">Town 1 
     <label>Town 1 
      <input type="checkbox" value="Town 1" name="Town 1"> 
     </label> 
     </li> 
     <li class="South-town-2" id="town-2">Town 2 
     <label>Town 2 
      <input type="checkbox" value="Town 2" name="Town 2"> 
     </label> 
     </li> 
    </ul> 
    </li> 
    <li class=" parent-7" id="the_id_7">West 
    <input type="checkbox" class="events-category" id="" value="West" name="West"> 
    <ul style="display:none;" class="child-list"> 
     <li class="West-town-5" id="town-5">Town 5 
     <label>Town 5 
      <input type="checkbox" value="Town 5" name="Town 5"> 
     </label> 
     </li> 
     <li class="West-town-6" id="town-6">Town 6 
     <label>Town 6 
      <input type="checkbox" value="Town 6" name="Town 6"> 
     </label> 
     </li> 
    </ul> 
    </li> 
</ul> 

и вот JQuery, что я использовал:

var $selexcta = jQuery.noConflict(); 
$selexcta('.events-category').change(function(){ 
    console.log('showing sub categories'); 
    var c = this.checked; 
    if(c){ 
     $selexcta(this).next('.child-list').slideToggle('fast'); 
     $selexcta(this).next('.child-list').addClass("mm"); 
    }else{ 
     $selexcta(this).next('.child-list').slideToggle('fast'); 
     $selexcta(this).next('.child-list').removeClass("mm"); 
    } 
}); 

Answer 1

Я думаю, что это то, что вам нужно (при открытии .child-лист, то другие, которые открыты закроются):
Demo here

var $selexcta = jQuery.noConflict(); 
$selexcta('.events-category').change(function() { 
console.log('showing sub categories'); 
var c = this; 
if (c.checked) { 
    $selexcta('.events-category').each(function() { 
     if (this != c) { 
      this.checked =false; 
      $selexcta('.child-list li input').prop('checked',false); 
      $selexcta('.child-list').removeClass("mm") 
     } 
    }); 
    $selexcta('.child-list').each(function() { 
     if (this.style.display != 'none' && this != $selexcta(this).next('.child-list')) { 
      $selexcta(this).slideToggle('fast'); 
     } 
    }); 
    $selexcta(this).next('.child-list').slideToggle('fast'); 
    $selexcta(this).next('.child-list').addClass("mm"); 
} else { 
    $selexcta(this).next('.child-list').slideToggle('fast'); 
    $selexcta(this).next('.child-list').removeClass("mm"); 
} 

});