如果选中复选框并使用 slideToggle

Question

我正在使用 slideToggle 在启用复选框时显示图像相关表单，如果未选中则隐藏它。

我的菜单结构如下：

<ul>
<li class="menu-item">
    <p>
        <label><input type="checkbox">...</input>Upload Image?</label>
    </p>
    <div class="settings-image">...image related forms...</div>
</li>
<li></li>
</ul>

我的jQuery代码：

jQuery(document).ready(function($) {
    $('input[type="checkbox"]').change(function(){
        $(this).toggleClass("option-checked", this.checked);            
        $(this).closest('li.menu-item').find('.settings-image').slideToggle();      
    });
});

当复选框 checked 尚未加载到页面时，此方法工作正常。

问题是页面加载时复选框是 checked。默认情况下 toggleClass 名称和 settings-image div 均不显示。

非常感谢任何正确方向的帮助。

Answer 1

您可以将 .trigger('change'); 放入更改函数中，这将在加载时触发更改。

$(document).ready(function($) {

  $('input[type="checkbox"]').change(function() {
    $(this).toggleClass("option-checked", this.checked);
    $(this).closest('li.menu-item').find('.settings-image').slideToggle();
  }).trigger('change');



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu-item">
    <p>
      <label><input type="checkbox" checked>...</input>Upload Image?</label>
    </p>
    <div class="settings-image">...image related forms...</div>
  </li>
  <li></li>
</ul>

如果选中复选框并使用 slideToggle

if checkbox is checked and using slideToggle

checkbox

jquery

slidetoggle