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

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

---

一开始你可以把所有的东西都滑上去

演示

---

我已经回答了这个问题，因为原始版本没有答案

警告背后有一个原因，即在问题中没有任何代码的情况下，您不能发布jsFidle链接。不要让我们去外部网站了解你的问题，把它写在这里。此外，对于您的问题，您的回答也要比原始答案更准确：

 <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>

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

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