jQuery .slideUp 问题

Question

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

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

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

<?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") ? " &#x25BC" : " &#x25B2") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=phone&order=" . $order . "\">Phone";
echo ($sort=="phone") ? (($order=="up") ? " &#x25BC" : " &#x25B2") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=email&order=" . $order . "\">Email";
echo ($sort=="email_stu") ? (($order=="up") ? " &#x25BC" : " &#x25B2") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=inst&order=" . $order . "\">Instrument";
echo ($sort=="instrument") ? (($order=="up") ? " &#x25BC" : " &#x25B2") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=teacher&order=" . $order . "\">Teacher";
echo ($sort=="teacher") ? (($order=="up") ? " &#x25BC" : " &#x25B2") : " ";
echo "</a></div>";
echo "<div class=\"sort\"><a href=\"index.php?sort=year&order=" . $order . "\">Year";
echo ($sort=="year") ? (($order=="up") ? " &#x25BC" : " &#x25B2") : " ";
echo "</a></div>";
?>
<div id="arrow">&larr;</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>";

?>

Answer 1

---

编辑 2013 年 2 月 25 日

根据评论，我认为值得注意的是 live() 已被贬值：

live() 现已折旧（从 1.7 开始，从 1.8 开始删除）。您应该像这样使用 on() （示例）： $(document).on("click",
“#toggleButton”，函数（）{}）；。您可以缩小文档范围，例如
只要它在页面加载时作为 DOM 元素存在即可。文档

---

我将使用 .slideToggle() 来解决这个问题。不要将它与它的姐妹 .fadeToggle()

    $(document).ready(function() {

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

少代码混淆，并且做同样的事情，对吧。

• 实例：
  http://jsfiddle.net/eDStK/
• 与其姐妹的实时示例
  .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/ 我在 chromium 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 添加项目，则可能会出现一些冲突......这是我在没有看到代码的情况下的最佳猜测。

Answer 2

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

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