jQuery隐藏和显示面板_Jquery_Html_Css

jQuery隐藏和显示面板

jquery html css

jQuery隐藏和显示面板,jquery,html,css,Jquery,Html,Css,在下面的代码中，我尝试构建两个面板；新建命令面板和轨道命令面板。我面临的问题是两个面板的组件在第一个面板中打开。我不确定你是否理解这个问题。这是代码，您可以尝试清楚地理解它： <html> <head> <script type="text/javascript" src="jscss/jquery.js"></script> <script type="text/javascript"> $(document).ready(fun

在下面的代码中，我尝试构建两个面板；新建命令面板和轨道命令面板。我面临的问题是两个面板的组件在第一个面板中打开。我不确定你是否理解这个问题。这是代码，您可以尝试清楚地理解它：

<html>
<head>
<script type="text/javascript" src="jscss/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
  });
});
$(document).ready(function(){
$(".flip1").click(function(){
    $(".panel1").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:220px;
display:none;
}
div.panel1,p.flip1
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel1
{
height:220px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<form action="Order.php" method="post">
   Name<br /><input style="font-weight: bold;" name="name" size="60" type="text"                 AUTOCOMPLETE=OFF><br /><br />

   Subject<br /><input style="font-weight: bold;" name="subject" size="60" type="text"     id="subject"><br /> <br />

   Email<br /><input style="font-weight: bold;" name="email" size="60" type="text"><br /> <br />

   <input type="submit" value="submit" />
   </form>
</div>


<div class="panel1">
<form action="Track.php" method="post">
   ID<br /><input style="font-weight: bold;" name="id" size="60" type="text"         AUTOCOMPLETE=OFF><br /><br />
   <input type="submit" value="submit" />
   </form>
</div>

<p class="flip">New Order</p>
<br/><br/><br/>
<p class="flip1">Track Order</p>

</body>
</html>


$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（“.panel”）。滑动切换（“慢速”）；
});
});
$（文档）.ready（函数（）{
$（“.flip1”）。单击（函数（）{
$（“.panel1”）。滑动切换（“慢速”）；
});
});
分区面板，p翻转
{
边际：0px；
填充物：5px；
文本对齐：居中；
背景：#e5eecc；
边框：实心1px#c3c3；
}
分区小组
{
高度：220px；
显示：无；
}
第1分区配电盘，第1页
{
边际：0px；
填充物：5px；
文本对齐：居中；
背景：#e5eecc；
边框：实心1px#c3c3；
}
第1分部
{
高度：220px；
显示：无；
}
名称



主题



电子邮件



ID



新订单




跟踪订单

谢谢

在标记中，您的订单是panel、panel1、New order header和Track order header。这是它们的显示顺序。

您的问题是您只是将它们按错误的顺序放置。使用

panel

，然后使用

flip

，然后使用

panel1

，然后使用

flip1

，您的问题在于您只是将它们按错误的顺序排列。使用

panel

，然后使用

flip

，然后使用

panel1

，然后使用

flip1

，我为您做了更改。是的，您在HTML结构的顺序上犯了错误。您可以查看以下内容：

基本上，请按如下方式订购：

分区小组

p、翻转

第1分部

p、 flip1

希望这会有所帮助。

我为您做了一些更改。是的，您在HTML结构的顺序上犯了错误。您可以查看以下内容：

基本上，请按如下方式订购：

分区小组

p、翻转

第1分部

p、 flip1

希望这会有所帮助。

这是因为html代码的顺序错误，请尝试以下操作：

<body>

  <div class="panel">
    <form action="Order.php" method="post">
      Name<br /><input style="font-weight: bold;" name="name" size="60" type="text" AUTOCOMPLETE=OFF><br /><br />

      Subject<br /><input style="font-weight: bold;" name="subject" size="60" type="text" id="subject"><br /> <br />

      Email<br /><input style="font-weight: bold;" name="email" size="60" type="text"><br /> <br />

      <input type="submit" value="submit" />
    </form>
  </div>
  <p class="flip">New Order</p>
  <br/><br/><br/>

  <div class="panel1">
    <form action="Track.php" method="post">
      ID<br /><input style="font-weight: bold;" name="id" size="60" type="text"         AUTOCOMPLETE=OFF><br /><br />
      <input type="submit" value="submit" />
    </form>
  </div>
  <p class="flip1">Track Order</p>


名称



主题



电子邮件



新订单




ID



跟踪订单

这是因为html代码的顺序错误，请尝试以下操作：

<body>

  <div class="panel">
    <form action="Order.php" method="post">
      Name<br /><input style="font-weight: bold;" name="name" size="60" type="text" AUTOCOMPLETE=OFF><br /><br />

      Subject<br /><input style="font-weight: bold;" name="subject" size="60" type="text" id="subject"><br /> <br />

      Email<br /><input style="font-weight: bold;" name="email" size="60" type="text"><br /> <br />

      <input type="submit" value="submit" />
    </form>
  </div>
  <p class="flip">New Order</p>
  <br/><br/><br/>

  <div class="panel1">
    <form action="Track.php" method="post">
      ID<br /><input style="font-weight: bold;" name="id" size="60" type="text"         AUTOCOMPLETE=OFF><br /><br />
      <input type="submit" value="submit" />
    </form>
  </div>
  <p class="flip1">Track Order</p>


名称



主题



电子邮件



新订单




ID



跟踪订单

在JSFIDLE上发布一些关于html/js/css问题的信息通常会有很大帮助。这里是一个示例，顺便说一句，您不必为每个函数使用

$（document）.ready（）

——使用一个函数包装所有函数，或者使用一个函数包装所有函数并将js代码放在页面底部，或者使用无函数并使用

.live（）

对于绑定事件，在JSFIDLE上发布关于html/js/css问题的信息通常会有很大帮助。这里是一个示例，顺便说一句，对于这些函数中的每一个，您不必使用

$（document）.ready（）

——使用一个函数包装所有函数，或者使用一个函数包装所有函数，或者使用一个函数包装所有函数并将js代码放在页面底部，或者使用一个函数并使用

.live（）

用于绑定事件