使用jquery显示/隐藏字段集_Jquery_Html

使用jquery显示/隐藏字段集

jquery html

使用jquery显示/隐藏字段集,jquery,html,Jquery,Html,我有以下html代码：- <!DOCTYPE html> <html> <body> <fieldset> <legend> <button> Show/Hide form </button> </legend>

我有以下html代码：-

<!DOCTYPE html>
<html>
    <body>
        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
            <br />
            Email:
            <input type="text" />
            <br />
            Date of birth:
            <input type="text" />
        </fieldset>

        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
            <br />
            Email:
            <input type="text" />
            <br />
            Date of birth:
            <input type="text" />
        </fieldset>

        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
                <br />
            Email:
            <input type="text" />
                <br />
            Date of birth:
            <input type="text" />
        </fieldset>

    </body>
</html>


显示/隐藏表单
姓名：


电邮：


出生日期:
显示/隐藏表单
姓名：


电邮：


出生日期:
显示/隐藏表单
姓名：


电邮：


出生日期:

但是，如果用户单击“显示/隐藏表单”按钮，我如何显示和隐藏字段集？是否有方法根据字段集的当前状态将按钮标签更改为“显示”或“隐藏”？

当

字段集

被隐藏时，您的按钮也被隐藏。您可以修改标记并使用

切换

方法：

<button class='toggle'>Hide</button>
<fieldset>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>

当

fieldset

被隐藏时，您的按钮也被隐藏。您可以修改标记并使用

切换

方法：

<button class='toggle'>Hide</button>
<fieldset>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>

您的HTML代码：

<button>Show/Hide form</button>

    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br />
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br/>
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>

您的JSFIDLE：

您的HTML代码：

<button>Show/Hide form</button>

    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br />
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br/>
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>

您的JSFIDLE：

如果隐藏字段集，则如果执行类似的隐藏操作，则按钮将隐藏为Not:

$（“按钮”）.parent（）.sibbins（）.hide（）

@Flater效率非常低，使用图例作为切换按钮也不是正确的用法。但是，在代码方面，它是隐藏字段集中所有内容的最简单方法，除了。除非您希望将类添加到每个其他子元素（这并不总是一个选项）。此外，人们经常制作remakr，说明字段集没有按应有的方式使用。老实说，我不同意。如果它的功能和外观很好，使用它。字段集看起来比带边框的带内部的div好得多。如果隐藏字段集，则如果执行类似的隐藏操作，则按钮将隐藏为Not:

$（“按钮”）.parent（）.sibbles（）.hide（）