jQuery .slideUp问题 [英] jQuery .slideUp problem
本文介绍了jQuery .slideUp问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
.slideDown工作正常。第二次单击链接时，会再次出现.slideDown动画而不是.slideUp。请帮帮忙。谢谢。
The .slideDown is working fine. When the link is clicked a second time, the .slideDown animation occurs again instead of the .slideUp. Please give me a hand. Thanks.
$(document).ready(function() {
$('#toggleButton').click(function() {
if ($('#toggleSection').is(":hidden")) {
$('#toggleSection').slideDown("slow");
}
else {
$('#toggleSection').slideUp("slow");
}
return false;
});
});
以下是整个模块的代码。此php包含在主页上，其中还包含页眉和页脚。
Below is the code from the entire module. This php is included on a main page where a header and footer are also included.
<?php
/*
Written by: Daniel Kassner
Website: http://www.danielkassner.com
Originally posted on: http://www.wlscripting.com
Date: 09-13-2007 and last updated: 05-21-2010
*/
if (!function_exists('format_phone_us')) {
function format_phone_us($phone = '', $convert = true, $trim = true)
{
// If we have not entered a phone number just return empty
if (empty($phone)) {
return false;
}
// Strip out any extra characters that we do not need only keep letters and numbers
$phone = preg_replace("/[^0-9A-Za-z]/", "", $phone);
// Keep original phone in case of problems later on but without special characters
$OriginalPhone = $phone;
// If we have a number longer than 11 digits cut the string down to only 11
// This is also only ran if we want to limit only to 11 characters
if ($trim == true && strlen($phone)>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 '<script language="javascript">';
echo 'window.location="index.php"';
echo '</script>';
}
// 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 '<script language="javascript">';
echo 'window.location="index.php"';
echo '</script>';
}
// 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 "<div class=\"list\">";
echo "<div class=\"row-header\">";
echo "<div class=\"sort\"><a href=\"index.php?sort=name&order=" . $order . "\">Name";
echo ($sort=="students.last_name") ? (($order=="up") ? " ▼" : " ▲") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=phone&order=" . $order . "\">Phone";
echo ($sort=="phone") ? (($order=="up") ? " ▼" : " ▲") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=email&order=" . $order . "\">Email";
echo ($sort=="email_stu") ? (($order=="up") ? " ▼" : " ▲") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=inst&order=" . $order . "\">Instrument";
echo ($sort=="instrument") ? (($order=="up") ? " ▼" : " ▲") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=teacher&order=" . $order . "\">Teacher";
echo ($sort=="teacher") ? (($order=="up") ? " ▼" : " ▲") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=year&order=" . $order . "\">Year";
echo ($sort=="year") ? (($order=="up") ? " ▼" : " ▲") : " ";
echo "</a></div>";
?>
<div id="arrow">←</div><div id="helper">Use these links to the left to sort the info.</div>
<?php
if ($username == "admin") {
?>
<button id="toggleButton">Show/Hide Inputs</button>
<?php
}
echo "</div>";
// Display the input forms if admin is logged in
$username = $_COOKIE['ID_my_site'];
if ($username == "admin") {
?>
<div id="toggleSection">
<div class="row-input">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div class="name"><input type="text" id="students" name="last_name" maxlength="40" value="Full Name"></div>
<div class="phone"><input type="text" id="students" name="phone" maxlength="40" value="Phone"></div>
<div class="email"><input type="text" id="students" name="email_stu" maxlength="40" value="Email"></div>
<div class="inst">
<select name="instrument">
<?php $instrument = mysql_query("SELECT instrument_name FROM instrument ORDER BY instrument_name ASC");
while($row = mysql_fetch_array($instrument)) {echo "<option>" . $row['instrument_name'] . "</option>";}?>
</select></div>
<div class="teacher">
<select name="teacher">
<?php $teacher = mysql_query("SELECT last_name_fac FROM faculty ORDER BY last_name_fac ASC");
while($row = mysql_fetch_array($teacher)) {echo "<option>" . $row['last_name_fac'] . "</option>";}?>
</select></div>
<div class="year">
<select name="year">
<option>FR</option>
<option>SO</option>
<option>JR</option>
<option>SR</option>
<option>GR1</option>
<option>GR2</option>
<option>DMA</option>
</select>
</div>
<div id="actions-add"><input type="submit" src="/images/add-icon.png" name="submit-add_student" class="add" value="Add"/></div>
</form>
</div>
</div>
<?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 "<div class=\"row\">";
$i++;
}
else
{
echo "<div class=\"row-alternate\">";
$i++;
}
echo "<div class=\"name\">" . $row['first_name'] . " " . $row['last_name'] . "</div>";
echo "<div class=\"phone\">" . format_phone_us($phone) . "</div>";
echo "<div class=\"email\"><a href=\"mailto:" . strtolower($row['email_stu']) . "\">" . strtolower($row['email_stu']) . "</a></div>";
echo "<div class=\"inst\">" . $row['instrument_name'] . "</div>";
echo "<div class=\"teacher\">" . $row['first_name_fac'] . " " . $row['last_name_fac'] . "</div>";
echo "<div class=\"year\">" . $row['year'] . "</div>";
if ($username == "admin") { // Display the delete button if admin is logged in
echo "<div class=\"actions\">";?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input type="hidden" name="ID" value="<?php echo $row['s_ID'];?>">
<input type="submit" src="/images/delete-icon.png" class="delete" name="submit_delete-stu" value="">
</form>
<?php
echo "</div>"; }
echo "</div>";
}
echo "</div>";
?>
推荐答案
编辑2013年2月25日
根据评论，我认为值得注意的是， live（）是折旧的：
live（）现在已经过折旧（从1.7开始，从1.8开始删除）。你应该像on（）那样使用（例子）：$（document）.on（click，
#toggleButton，function（）{}）;.您可以缩小文档范围，因为
很长，因为它在页面加载时作为DOM元素存在。文档
我会使用。slideToggle（）解决此问题。不要将其与其姐妹 .fadeToggle（）混淆
I would use .slideToggle() for this problem. Don't confuse it with its sister .fadeToggle()
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#toggleSection').slideToggle('slow');
});
});
更少的代码，并做同样的事情，对。
less code, and does the same thing, right.
- 实例：
http://jsfiddle.net/eDStK/ - 其妹妹的实时示例
.fadeToggle（）：
http://jsfiddle.net/TYcWg/1/
- live example: http://jsfiddle.net/eDStK/
- live example with its sister
.fadeToggle(): http://jsfiddle.net/TYcWg/1/
HTML
我在livexample中使用
<button id="toggleButton">Bacon Me</button>
<div id="toggleSection">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.
</div>
查看您的实际代码，我无法复制问题。
http://jsfiddle.net/zXwRB/ 我在chrome 12.0.742.91和firefox中试过这个3.6
looking at your actual code, I am unable to replicate the problem . http://jsfiddle.net/zXwRB/ I tried this in chromium 12.0.742.91 and firefox 3.6
根据你的评论，我想知道是否将其包装在。live（）将是正确的方法。
per your comment, I wonder if wrapping this in .live() would be the right approach.
$(document).ready(function() {
$('#toggleButton').live('click', function() {
$('#toggleSection').slideToggle('slow');
});
});
不幸的是，如果没有看到更多代码，可能很难肯定。
unfortunately, it maybe hard to say for sure without seeing more of your code.
我建议 .live（）由于API的以下段落
I suggest .live() due to the following paragraph from the API
.live（）方法可以通过使用event $来影响尚未向DOM添加
的
元素 b $ b委托：绑定到
祖先元素的处理程序负责在
后代上触发的
事件。传递给
.live（）的处理程序从不绑定到元素;
而不是.live（）将一个特殊的
处理程序绑定到DOM树的根目录。
The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants. The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree.
if你可能会在以后通过PHP添加项目可能会有一些冲突......这是我最好的猜测而不看代码。
if you may be adding items later through PHP there may be some conflicts....its my best guess without seeing the code.
这篇关于jQuery .slideUp问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
