我有以下 HTML 表單：
我希望在用戶訪問頁面時正常顯示欄位 1-3。欄位 4 和 5 對于表單提交是額外的非強制性，所以我想隱藏這些并在用戶單擊“ ”影像/按鈕時顯示它們，并將它們下拉到表單底部但在上方提交按鈕（有點像顯示高級型別的東西）。
<form action="#" class="u-clearfix u-form-spacing-25 u-form-vertical u-inner-form" source="email" name="Netflow" style="padding: 10px;">
<div class="u-form-group u-form-name u-form-partition-factor-2">
<label for="field1" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-1">field1</label>
<input type="text" placeholder="field1" id="name-26a2" name="text-1" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-1" required="">
</div>
<div class="u-form-email u-form-group u-form-partition-factor-2">
<label for="field2" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-2">field2</label>
<input type="number" placeholder="field2" id="email-26a2" name="number" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-2" required="">
</div>
<div class="u-form-group u-form-partition-factor-2 u-form-group-5">
<label for="field3" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-5">field3</label>
<input type="text" placeholder="field3" id="text-c578" name="number-1" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-5">
</div>
<div class="u-form-group u-form-partition-factor-2 u-form-group-6">
<label for="field4" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-6">field4</label>
<input type="text" placeholder="field4" id="text-a09b" name="text" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-6">
</div>
<div class="u-form-group u-form-partition-factor-2 u-form-group-7">
<label for="field5" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-7">field5</label>
<input type="text" placeholder="field5" id="text-414f" name="text-2" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-7">
</div>
<div class="u-align-left u-form-group u-form-submit">
<a href="#" class="u-btn u-btn-round u-btn-submit u-button-style u-custom-color-2 u-custom-font u-heading-font u-radius-50 u-btn-1">Submit</a>
<input type="submit" value="submit" class="u-form-control-hidden">
</div>
</form>我已經研究過如何做到這一點，但找不到明確的答案。據我所知，我需要使用 JavaScript 來創建顯示附加欄位的下拉影片。
如果有人可以為我提供一個如何實作這一目標的示例，或者使用這個簡單的 HTML 表單為我指明正確的方向，我將不勝感激，謝謝！
uj5u.com熱心網友回復：
我們可以在加載 DOM 內容時隱藏附加欄位。通過在“click”上添加事件監聽器，我們可以通過更改 field4 和 field5 上的顯示型別來實作類似切換的功能。
一個簡約的作業示例看起來像這樣：
<html>
<head>
<script>
window.onload = function () {
const btn = document.getElementById('button-c578');
const field4 = document.getElementById("additional-1");
const field5 = document.getElementById("additional-2");
field4.style.display = 'none';
field5.style.display = 'none';
btn.value = 'Show more';
btn.addEventListener('click', function handleClick() {
if (field4.style.display === 'none') {
field4.style.display = 'block';
field5.style.display = 'block';
btn.value = 'Show less';
} else {
field4.style.display = 'none';
field5.style.display = 'none';
btn.value = 'Show more';
}
});
}
</script>
</head>
<body>
<form action="#" class="u-clearfix u-form-spacing-25 u-form-vertical u-inner-form" source="email" name="Netflow"
style="padding: 10px;">
<div class="u-form-group u-form-name u-form-partition-factor-2">
<label for="field1"
class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-1">field1</label>
<input type="text" placeholder="field1" id="name-26a2" name="text-1"
class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-1"
required="">
</div>
<div class="u-form-email u-form-group u-form-partition-factor-2">
<label for="field2"
class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-2">field2</label>
<input type="number" placeholder="field2" id="email-26a2" name="number"
class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-2"
required="">
</div>
<div class="u-form-group u-form-partition-factor-2 u-form-group-5">
<label for="field3"
class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-5">field3</label>
<input type="text" placeholder="field3" id="text-c578" name="number-1"
class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-5">
</div>
<div class="u-form-group u-form-partition-factor-2 u-form-group-5">
<input type="button" id="button-c578" name="add"
class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-5">
</div>
<div class="u-form-group u-form-partition-factor-2 u-form-group-6" id="additional-1">
<label for="field4"
class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-6">field4</label>
<input type="text" placeholder="field4" id="text-a09b" name="text"
class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-6">
</div>
<div class="u-form-group u-form-partition-factor-2 u-form-group-7" id="additional-2">
<label for="field5"
class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-7">field5</label>
<input type="text" placeholder="field5" id="text-414f" name="text-2"
class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-7">
</div>
<div class="u-align-left u-form-group u-form-submit">
<a href="#"
class="u-btn u-btn-round u-btn-submit u-button-style u-custom-color-2 u-custom-font u-heading-font u-radius-50 u-btn-1">Submit</a>
<input type="submit" value="submit" class="u-form-control-hidden">
</div>
</form>
</body>
</html>uj5u.com熱心網友回復：
您不需要 JavaScript 來顯示/隱藏，只需使用 CSS 在單擊按鈕時顯示內容。
我創建/顯示的代碼的原理是相同的，只需將您想要隱藏的內容放在一個 div 中，并在提交按鈕之前在表單中將其命名為 。
body {
background-color: cornflowerblue;
font-size: 100%;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
line-height: 1.4;
}
main {
display: block;
box-sizing: border-box;
width: 90%;
margin: 1em auto;
padding: 1em 2em;
color: #000;
background-color: pink;
border: .07em solid purple;
border-radius: .5em;
}
/* Expand part */
.expand {
display: none;
}
.expand:target {
display: block;
}<main>
<ul>
<li><a href="#Expand_1">Expand 1</a>
<ul class="expand" id="Expand_1">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#Expand_2">Expand 2</a>
<ul class="expand" id="Expand_2">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Has a submarine that he garbage-picked.</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#Expand_3">Expand 3</a>
<ul class="expand" id="Expand_3">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</li>
</ul>
</main>uj5u.com熱心網友回復：
這是一個小例子，說明如何解決這個問題。
const btn = document.querySelector(".btn");
const to_hide = document.querySelector(".to_hide");
btn.addEventListener("click", function handleClick(event) {
event.preventDefault();
to_hide.classList.toggle("to_hide");
});.to_hide {
display: none;
}<body>
<form>
<div>
<label for="name">Name:</label>
<input class="name" type="text" name="name"></input><br>
</div>
<div>
<label for="pass">Pass:</label>
<input class="pass" type="text" name="pass"></input><br>
</div>
<button class="btn">Show more</button>
<div class="to_hide">
<label for="full_name">Full Name:</label>
<input type="text" name="full_name"></input><br>
</div>
</form>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519388.html