Question

我有一个由两部分组成的表格，两者都在同一页上。

我希望<p>元素成为表单的第二部分。 <p>必须是不可见的，并且仅在填写表单的第一部分时显示。因此，当您填写表单并单击下一步时，<p>向下滑动并显示其余部分形式

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
});

Answer 1

根据您提供的信息，我认为您正在寻找： -

HTML： -

<input type="button" id="btn1" value="Prev">
<input type="button" id="btn2" value="Next">
<div>welcome to mypage
    fill all the fields :- Form 1</div>
<p style="display:none">
    Now Fill this section :- Form 2
</p>

JS： -

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").slideUp();
  });
  $("#btn2").click(function(){
    $("p").slideDown();
  });
});

SEE THE DEMO

Answer 2

将两个部分放入id为的两个div中，并为第二个div设置样式display none。

style="display:none"

然后使用它。

$(document).ready(function(){
  $(".btn1").click(function(){
    $("div2").show();
    $("div1").hide().slideUp();
  });
  $(".btn2").click(function(){
    $("div1").show();
    $("div2").hide().slideDown();
  });
});

使用if else执行slideDown

2 个答案: