jquery使用add remove class隐藏和显示元素

Question

帮助人们，

我正在创建一个jquery的东西，

有一组父复选框，每个复选框都有一个子复选框。子复选框设置为display：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-list打开时，另一个打开的将关闭）：
的 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");
}

});