用于2个html案例的jQuery slideDown

Question

下面是我的checkbox slideDown解决方案的示例。http://jsfiddle.net/kNpYz/3/

当你选中复选框这样一些元素将slideDown或slideUP，它工作得很好，但当我改变超文本标记语言的时候。我知道我必须更改jQuery标记，但我不知道如何更改。

<div id="section-uvitaci_text" class="section section-checkbox ibutton">
  <h3 class="heading">Uvítací text</h3>
  <div class="option">
    <div class="controls">
      <input type="hidden" class="fld checkbox aq-input" name="uvitaci_text" id="uvitaci_text" value="0">
      <div class="ibutton-container">
        <input type="checkbox" class="fld checkbox of-input" name="uvitaci_text" id="uvitaci_text" value="1" checked="checked">
        <div class="ibutton-handle" style="left: 50px; ">
          <div class="ibutton-handle-right">
            <div class="ibutton-handle-middle"></div>
          </div>
        </div>
        <div class="ibutton-label-off"><span style="margin-right: -50px; ">
          <label>OFF</label>
          </span></div>
        <div class="ibutton-label-on" style="width: 54px; overflow-x: hidden; overflow-y: hidden; "><span style="margin-left: 0px; ">
          <label>ON</label>
          </span></div>
        <div class="ibutton-padding-left"></div>
        <div class="ibutton-padding-right"></div>
      </div>
    </div>
    <div class="explain">This will show an offline message. Except for administrators, nobody will be able to access the site</div>
    <div class="clear"> </div>
  </div>
</div>

所以效果不起作用。对于这种HTML情况，我必须在我的js中更改什么？

Thx为您的时间

Answer 1

使用以下jQuery代码：

  jQuery('.fld').click(function() {
    $(this).closest('.option').find('.explain').slideToggle('normal', "swing");
  });

Answer 2

您的HTML有许多错误，例如不能有两个具有相同Id的控件，并且您在jquery中滑动的ID不存在，请尝试以下操作：

Correct code