jQuery .slideUp问题

.slideDown工作正常。 第二次单击链接时,会再次出现.slideDown动画而不是.slideUp。 请帮我一把 谢谢。

$(document).ready(function() { $('#toggleButton').click(function() { if ($('#toggleSection').is(":hidden")) { $('#toggleSection').slideDown("slow"); } else { $('#toggleSection').slideUp("slow"); } return false; }); }); 

以下是整个模块的代码。 这个php包含在主页面上,其中还包含页眉和页脚。

 11) { $phone = substr($phone, 0, 11); } // Do we want to convert phone numbers with letters to their number equivalent? // Samples are: 1-800-TERMINIX, 1-800-FLOWERS, 1-800-Petmeds if ($convert == true && !is_numeric($phone)) { $replace = array('2'=>array('a','b','c'), '3'=>array('d','e','f'), '4'=>array('g','h','i'), '5'=>array('j','k','l'), '6'=>array('m','n','o'), '7'=>array('p','q','r','s'), '8'=>array('t','u','v'), '9'=>array('w','x','y','z')); // Replace each letter with a number // Notice this is case insensitive with the str_ireplace instead of str_replace foreach($replace as $digit=>$letters) { $phone = str_ireplace($letters, $digit, $phone); } } $length = strlen($phone); // Perform phone number formatting here switch ($length) { case 7: // Format: xxx-xxxx return preg_replace("/([0-9a-zA-Z]{3})([0-9a-zA-Z]{4})/", "$1-$2", $phone); case 10: // Format: (xxx) xxx-xxxx return preg_replace("/([0-9a-zA-Z]{3})([0-9a-zA-Z]{3})([0-9a-zA-Z]{4})/", "($1) $2-$3", $phone); case 11: // Format: x(xxx) xxx-xxxx return preg_replace("/([0-9a-zA-Z]{1})([0-9a-zA-Z]{3})([0-9a-zA-Z]{3})([0-9a-zA-Z]{4})/", "$1($2) $3-$4", $phone); default: // Return original phone if not 7, 10 or 11 digits long return $OriginalPhone; } } } // Has the form been submitted? if (isset($_POST['submit-add_student'])) { // Convert the instrument and teacher to IDs $resultIns = mysql_query("SELECT i_ID FROM instrument WHERE instrument_name = '$_POST[instrument]'"); $instID = mysql_fetch_row($resultIns); $instID = $instID[0]; $resultTeach = mysql_query("SELECT f_ID FROM faculty WHERE last_name_fac = '$_POST[teacher]'"); $facID = mysql_fetch_row($resultTeach); $facID = $facID[0]; // Seperate first and last name $names = "$_POST[last_name]"; $namesArray = explode(" ", $names); $firstName = $namesArray[0]; $lastName = $namesArray[1]; // The actual insert command $ins = "INSERT INTO students (s_ID, last_name, first_name, phone, email_stu, instrument, teacher, year) VALUES (s_ID,'$lastName','$firstName','$_POST[phone]','$_POST[email_stu]','$instID','$facID','$_POST[year]')"; $resultStu = mysql_query($ins); if(!$resultStu) { die('Error: ' . mysql_error()); } echo ''; echo 'window.location="index.php"'; echo ''; } // Has the DELETE form been submitted? if (isset($_POST['submit_delete-stu'])) { // The actual delete command $stuDelete = "DELETE FROM students WHERE s_ID = '$_POST[ID]'"; $resultStuDelete = mysql_query($stuDelete); if(!$resultStuDelete) { die('Error: ' . mysql_error()); } echo ''; echo 'window.location="index.php"'; echo ''; } // Toggle the display order $order = $_GET['order']; if (empty($order)) { $orderBy="ASC"; $order="down"; } else { if ($order=="up") { $orderBy="ASC"; $order="down"; } elseif ($order=="down") { $orderBy="DESC"; $order="up"; } } // Change the sort parameter $sort = $_GET['sort']; if (empty($sort)) { $sort="students.last_name"; } else { switch ($sort) { case "name": $sort="students.last_name"; break; case "phone": $sort="phone"; break; case "email": $sort="email_stu"; break; case "inst": $sort="instrument"; break; case "teacher": $sort="teacher"; break; case "year": $sort="year"; break; } } // Display the table header links echo "
"; echo ""; // Display the input forms if admin is logged in $username = $_COOKIE['ID_my_site']; if ($username == "admin") { ?>
<form action="" method="post">
<?php $instrument = mysql_query("SELECT instrument_name FROM instrument ORDER BY instrument_name ASC"); while($row = mysql_fetch_array($instrument)) {echo "" . $row['instrument_name'] . "";}?>
<?php $teacher = mysql_query("SELECT last_name_fac FROM faculty ORDER BY last_name_fac ASC"); while($row = mysql_fetch_array($teacher)) {echo "" . $row['last_name_fac'] . "";}?>
FR SO JR SR GR1 GR2 DMA
<?php } // Display the information $result = mysql_query("SELECT * FROM students LEFT JOIN faculty ON students.teacher = faculty.f_ID LEFT JOIN instrument ON students.instrument = instrument.i_ID ORDER BY $sort $orderBy"); $i = 0; while($row = mysql_fetch_array($result)) { $phone = $row['phone']; if ($i % 2 ==0) { echo "
"; $i++; } else { echo "
"; $i++; } echo "
" . $row['first_name'] . " " . $row['last_name'] . "
"; echo "
" . format_phone_us($phone) . "
"; echo ""; echo "
" . $row['instrument_name'] . "
"; echo "
" . $row['first_name_fac'] . " " . $row['last_name_fac'] . "
"; echo "
" . $row['year'] . "
"; if ($username == "admin") { // Display the delete button if admin is logged in echo "
";?> <form action="" method="post"> <input type="hidden" name="ID" value=""> <?php echo "
"; } echo "
"; } echo "
"; ?>


编辑2013年2月25日

根据评论我认为重要的是要注意live()是折旧的:

live()现在已经折旧(从1.7开始,从1.8开始删除)。 你应该像on()那样使用(例子):$(document).on(“click”,“#turngButton”,function(){});. 您可以缩小文档范围,只要它在页面加载时作为DOM元素存在即可。 文档


我会使用.slideToggle()来解决这个问题。 不要把它与姐姐混淆.fadeToggle()

  $(document).ready(function() { $('#toggleButton').click(function() { $('#toggleSection').slideToggle('slow'); }); }); 

更少的代码,并做同样的事情,对。

  • 实例: http : //jsfiddle.net/eDStK/
  • 与姐姐.fadeToggle()实例: http : //jsfiddle.net/TYcWg/1/

HTML
我在livexample中使用过

   
Bacon ipsum dolor sit amet pork chop magna pork, tempor in jowl ham labore rump tenderloin pariatur pancetta tri-tip pork loin. Spare ribs meatloaf ground round chicken, non esse cow.

看着你的实际代码,我无法复制问题。 http://jsfiddle.net/zXwRB/我在chrome 12.0.742.91和firefox 3.6中试过这个

UPDATE

根据你的评论,我想知道将它包装在.live()中是否是正确的方法。

  $(document).ready(function() { $('#toggleButton').live('click', function() { $('#toggleSection').slideToggle('slow'); }); }); 

不幸的是,如果没有看到更多代码,可能很难说。

由于API中的以下段落,我建议使用.live()

.live()方法能够通过使用事件委托来影响尚未添加到DOM的元素:绑定到祖先元素的处理程序负责在其后代上触发的事件。 传递给.live()的处理程序永远不会绑定到元素; 相反,.live()将一个特殊的处理程序绑定到DOM树的根。

如果您可能稍后通过PHP添加项目可能会有一些冲突….这是我最好的猜测,而不会看到代码。

您也可以仅使用toggle而不是slideToggle

看到这个: https : //jsfiddle.net/st6v9as0/2/