2012-05-29 4 views
0

В следующем коде я пытаюсь построить две панели; панель нового заказа и панель заказа трека. Проблема, с которой я сталкиваюсь, - это компоненты обеих панелей, открытых на первой панели. Я не уверен, если вы понимаете проблему. Это код, и вы можете попробовать, чтобы понять это ясно:jQuery Скрыть и показать

<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> 

Благодаря

+0

это часто очень помогает размещать что-то на jsfiddle о проблеме с HTML/JS/CSS здесь является Например, http://jsfiddle.net/Yu7Gh/ – Filype

+1

Кстати, вам не нужно использовать '$ (document) .ready()' для каждой из этих функций - использовать одну, чтобы обернуть все, или none, и поставить JS кода внизу страницы или использовать none и использовать '.live()' для привязки событий – casraf

ответ

1

Это из-за неправильного порядка вашего 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> 

0

В разметке ваш заказ панели, panel1, заголовок New Order, и заголовок трека Order. Это порядок, в котором они будут отображаться.

1

Ваша проблема в том, что вы просто положили их в неправильном порядке. Используйте panel, затем flip, затем panel1, затем flip1.

1

Я внесла изменения для вас. Да, вы делали ошибки по порядку структуры HTML. Вы можете проверить это: http://jsfiddle.net/zhujy_8833/pAerK/

В основном, пожалуйста, сделать заказ, как это:

  1. div.panel

  2. p.flip

  3. div.panel1

  4. p.flip1

Надеюсь, это поможет.

Смежные вопросы