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，则此功能正常。

问题是当pageload上的复选框 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

1 个答案: