jQuery slideDown с формами

почему следующий код не работает? В Opera он показывает только черную полосу на секунду, где должен быть div, в IE показывает div на 1 секунду, в FF ничего не происходит.

function showAdvanced(){
$("#advanced").slideDown("slow");
};

<div id="content">
  <form action="mycontrolleraddress" method="post" accept-charset="utf-8" name="search_form" id="search_form">
  <input type="text" name="query" value="" style="width:300px;font-size:18pt;border-color:#0080FF;border-width:2px;border-style:solid;background-color:#F2F2F2;"  />  
  <a href="" onclick="showAdvanced();" style="font-size:8pt;font-color:blue;">Advanced options</a>
  <br/>
  <div id="advanced" style="position:relative;height:400px;">From: 
    <input type="text" name="date_from" value="" id="datepicker" onchange="validateDate();" class="datefield"  /> To: 
    <input type="text" name="date_to" value="" id="datepicker2" onchange="validateDate();" class="datefield"  /> 
    <input type="text" name="limit" value="Results limit"  />
  </div>
  <input type="submit" name="submit" value="Szukaj"  />           
</div>

Это в основном текстовое поле для поискового запроса, и я хочу, чтобы дополнительные параметры (два средства выбора данных и текстовое поле) появлялись после нажатия на ссылку.


jquery slidedown
person gh0st    schedule 29.06.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ваш скрипт внутри <script> тегов, в <head>? Убедитесь, что он выглядит примерно так: http://jsfiddle.net/bJQVa/. Обратите внимание, что я также скрыл #advanced по умолчанию.

ПРИМЕЧАНИЕ. Я также добавил # для href и возврат false в функцию.

person glortho    schedule 29.06.2011
comment
Да, это в ‹head›, jQuery для сборщиков данных работает нормально. У меня также есть $(#advanced).hide(); при загрузке документа. - person gh0st; 30.06.2011
comment
Мой jsFiddle работает для вас в FF? У меня работает в 4.0.1, а также в IE 8. - person glortho; 30.06.2011
comment
ПРИМЕЧАНИЕ. Я также добавил # для href и возврат false в функцию. - person glortho; 30.06.2011
comment
Да и голова не нужна. Я действительно просто проверял <script>. Я отредактирую. - person glortho; 30.06.2011
comment
Я добавил «вернуть ложь»; в функции, и теперь она работает. Большое спасибо, Джед. - person gh0st; 30.06.2011

arrow_upward
0
arrow_downward 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">

        console.log('script loaded');

        function showAdvanced() {
            console.log('showAdvanced() executed');
            $("#advanced").slideDown("slow");
        };

        $(document).ready(function(){
            console.log('document is ready');
        });

    </script>
</head>
<body>

<div id="content">
<form action="mycontrolleraddress" method="post" accept-charset="utf-8" name="search_form" id="search_form">

<input type="text" name="query" value=""/><br/>

<a href="#" onclick="showAdvanced();" style="font-size:8pt;font-color:blue;">Advanced options</a><br/>

<div id="advanced" style="display: none;">
    From: <input type="text" name="date_from" value="" id="datepicker" onchange="validateDate();" class="datefield"  /><br/>
    To: <input type="text" name="date_to" value="" id="datepicker2" onchange="validateDate();" class="datefield"  /> <br/>
    <input type="text" name="limit" value="Results limit"  />
</div>
<input type="submit" name="submit" value="Szukaj"  />

</div>

</body>
</html>

Работает на меня. В следующий раз постарайтесь лучше отформатировать свой код, чтобы он был более читабельным.

person Darrarski    schedule 29.06.2011