php - 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() is depreciated now (as of 1.7 and removed as of 1.8). You should use on() like so (example): $(document).on("click", "#toggleButton", function() {});. You can narrow down document, as long as it exists as a DOM element on page load. Documentation

---

我会使用 .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 中试过这个

更新

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

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

不幸的是，如果没有看到更多您的代码，可能很难确定。

我建议 .live() 因为 API 中的以下段落

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.

如果您稍后可能会通过 PHP 添加项目，则可能会出现一些冲突……这是我在没有看到代码的情况下的最佳猜测。