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 ""; echo "Name"; echo ($sort=="students.last_name") ? (($order=="up") ? " ▼" : " ▲") : " "; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; ?> ←Use these links to the left to sort the info. <?php } 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/