两个单击功能与父母

Question

我正在建立一个特定的时间复选框，点击后我需要一周的日期下拉一个复选框。一旦用户点击该复选框，就会出现[From - To]。

问题是我有多个这样的东西下降，只需要显示我点击的那个。

到目前为止，我只把它设置为星期一，但是我不能让它从第一个出现。

<div class="specificHolder">

      <div class="row">
       <div class="col-md-3">
         Specific Time<input type="checkbox" class="specificTime">
       </div>
      </div>

          <div class="specific_on" style="display:none">
            <div class="row">
              <div class="col-md-12">
                Monday<input type="checkbox" class="monday">
              </div>
            </div>
         </div>
  </div>

  <div class="specificHolder">

      <div class="row">
       <div class="col-md-3">
         Specific Time<input type="checkbox" class="specificTime">
       </div>
      </div>

          <div class="specific_on" style="display:none">
            <div class="row">
              <div class="col-md-12">
                Monday<input type="checkbox" class="monday">
                  <div class="monday_to_from" style="display:none">
                    <input type="text" value="From">
                    <input type="text" value="To">
                  </div>
              </div>
            </div>
         </div>

$('.specificTime').on('click', function() {
    $(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});

$('.monday').on('click', function(){
    $(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
});

https://jsfiddle.net/y1b8fr20/

Answer 1

更新

在多个触发器之间使用toggle()会产生令人困惑的行为。此更新分隔了向上和向下的滑动并侦听更改事件而不是单击事件，以便在.monday复选框之间进行更多控制。现在它将表现如下：

• to from框仅在选中.monday复选框时显示
• 如果取消选中.monday复选框，.to from框将会滑动。
• 如果选中.monday，则fromto会停留。
如果取消选中fromto两个，
• .monday将仅进行slideUp

<小时/> 您只有一个from to输入，所以这就足够了：

   $('.monday').on('change', function() {

  if ($('.monday').is(':checked')) {

    $('.monday_to_from').slideDown('slow');

  } else {

    $('.monday_to_from').slideUp('slow');
  }
});

将其移出第二组复选框的影响：

<div class="monday_to_from" style="display:none">
  <input type="text" value="From">
  <input type="text" value="To">
</div>

演示

$('.specificTime').on('click', function() {
  $(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});

$('.monday').on('change', function() {

  if ($('.monday').is(':checked')) {

    $('.monday_to_from').slideDown('slow');
    
  } else {
  
    $('.monday_to_from').slideUp('slow');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specificHolder">

  <div class="row">
    <div class="col-md-3">
      Specific Time<input type="checkbox" class="specificTime">
    </div>
  </div>

  <div class="specific_on" style="display:none">
    <div class="row">
      <div class="col-md-12">
        Monday<input type="checkbox" class="monday">
      </div>
    </div>
  </div>
</div>

<div class="specificHolder">

  <div class="row">
    <div class="col-md-3">
      Specific Time<input type="checkbox" class="specificTime">
    </div>
  </div>

  <div class="specific_on" style="display:none">
    <div class="row">
      <div class="col-md-12">
        Monday<input type="checkbox" class="monday">

      </div>
    </div>

  </div>
</div>
<div class="monday_to_from" style="display:none">
  <input type="text" value="From">
  <input type="text" value="To">
</div>