Question

很抱歉，如果这是一个愚蠢的问题。但过去几天这让我头晕目眩。

我正在为学校的管理员创建一个网站，可以轻松地将数据输入数据库。我的所有投入都在起作用。我现在只是想让用户更轻松。所以我的问题是：我可以使用JQuery使用手风琴/可折叠的形式。这就是我现在所拥有的

有关解释，下面的代码位于“form.php”文件

中

    <?php

require_once 'inc/header.inc.php';
?>
    <form action=""  id="" method="POST">      
        <fieldset>

        <legend>Please Complete the Details</legend>
         <div class ="">
           <label for="FName" class="">Child's First Name</label>
           <div class="">
            <input type="text" name="FName" id="FName"  maxlength="9" class="form-control" required title="Please type the child's first name here">
           </div>
         </div>

        <!-- ///////////////////////////////////////////////////////////////////////////////////// -->


        <legend>Please Complete the parent's details</legend>
         <div class ="">
           <label for="FName" class="">Parents First Name</label>
           <div class="">
            <input type="text" name="PFName" id="PFName"  maxlength="9" class="form-control" required title="Please type the parent's first name here">
           </div>
         </div>

        <!-- /////////////////////////////////////////////////////////////////////// -->

        <legend>Please Complete the parent's details</legend>
        <div class ="">
           <label for="extraNo" class="">Extra Number, Optional</label>
           <div class="">
            <input type="text" name="extraNo" id="extraNo"  maxlength="15" class="form-control" required title="Please enter extra number here">
           </div>
         </div>
            <div class = "">
            <div class="input">
           <input type="submit" class="btn btn-primary"value="Insert Record" name = "Submit">
         </div>
         </div>
        </fieldset>
        </form>

    <?php
}
require_once 'inc/footer.inc.php';
?>

我的样式和脚本位于我的header.inc.php和footer.inc.php文件中。

我要做的是在每个标签上放一个手风琴，这样当用户浏览表单时，它不会只是一大块文本。

所以我只是想知道。我是否将手风琴的代码放入我的页眉/页脚文件中，然后将其放入我的form.php

任何回复或其他建议都会很棒。 P.S我没有使用Bootstrap。

感谢。

Answer 1

您需要包含jQuery UI（Google Library），然后为您的字段集设置ID（例如，accordian）。

现在你需要使用这个jQuery：

$('#accordian').accordian({header:'legend'});

Accordian API Documentation

最后要注意的是，请务必按顺序包含两个jQuery和jQuery UI。通常，这是在header.php中完成的，这样所有页面都可以使用这些资源。

与php形式的手风琴

1 个答案: