Question

我想用自定义html结构创建手风琴表单，但我的脚本无法正常工作。我希望当鼠标悬停在fieldset的slideDown当前字段集上并滑动页面中的其他字段集时。

 <div id="10" class="dm">
 <fieldset class="fldset">
    <legend class="dfl">Test For Sigma...?</legend>
    <table class="tbl">
        <tbody>
            <tr class="dynamic-form-tr">Fildset Content...</tr>
        </tbody>
    </table>
 </fieldset>
 </div>
<div id="11" class="dm">
<fieldset class="fldset">
    <legend class="dfl">Test For Sigma...?</legend>
    <table class="tbl hide">
        <tbody>
            <tr class="dynamic-form-tr">Fildset Content...</tr>
        </tbody>
    </table>
 </fieldset>
</div>
<div id="12" class="dm">
<fieldset class="fldset">
    <legend class="dfl">Test For Sigma...?</legend>
    <table class="tbl hide">
        <tbody>
            <tr class="dynamic-form-tr">Fildset Content...</tr>
        </tbody>
    </table>
 </fieldset>
 </div>
 <div id="13" class="dm">
 <fieldset class="fldset">
    <legend class="dfl">Test For Sigma...?</legend>
    <table class="tbl hide">
        <tbody>
            <tr class="dynamic-form-tr">Fildset Content...</tr>
        </tbody>
    </table>
 </fieldset>
 </div>
 <div id="14" class="dm">
 <fieldset class="fldset">
    <legend class="dfl">Test For Sigma...?</legend>
    <table class="tbl hide">
        <tbody>
            <tr class="dynamic-form-tr">Fildset Content...</tr>
        </tbody>
    </table>
 </fieldset>
 </div>

 <script>
    (function () {
    //$('fieldset').next().addClass('hide');

    $('legend').on('mouseenter', function(){
        $(this).next().slideDown();
        $(this).prevUntil('table').slideUp();
    });
    })();
 </script>

Answer 1

你可以在第一个实例中全部滑动

demo http://jsfiddle.net/h68udn81/2/

(function () {
        //$('fieldset').next().addClass('hide');

        $('legend').on('mouseenter', function(){
            $('table').slideUp();
            $(this).next().slideDown();
        });
})();

我已经回答了这个问题，原来没有答案

如何用jquery创建手风琴表单？

1 个答案: