问题

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;
            });
    });

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") ? " &#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>";

?>

回答1:

Edit 25 FEB 2013

Per the comments I believe it is important to note that live() is depreciated:

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

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.

live example: http://jsfiddle.net/eDStK/
live example with its sister .fadeToggle(): http://jsfiddle.net/TYcWg/1/

HTML
I used in the 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>

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

UPDATE

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.

I suggest .live() due to the following paragraph from the 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.

if you may be adding items later through PHP there may be some conflicts....its my best guess without seeing the code.