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 включен на главной странице, где также включены верхний и нижний колонтитулы.

<?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>";

?>
Источник

2 ответа

Решение

Редактировать 25 февраля 2013

По комментариям я считаю важным отметить, что live() амортизируется:

live () устарела (с 1.7 и удалена с 1.8). Вы должны использовать on() следующим образом (пример): $(document).on("click", "#toggleButton", function() {});. Вы можете сузить документ, если он существует как элемент DOM при загрузке страницы. Документация

Я бы использовал .slideToggle() для этой проблемы. Не путайте это с его сестрой .fadeToggle()

    $(document).ready(function() {

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

меньше кода, и делает то же самое, верно.

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

ОБНОВИТЬ

в ответ на ваш комментарий, мне интересно, будет ли это правильным.

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

к сожалению, трудно сказать наверняка, не видя больше вашего кода.

Я предлагаю .live() из-за следующего абзаца из API

Метод.live() может воздействовать на элементы, которые еще не были добавлены в DOM, с помощью использования делегирования событий: обработчик, связанный с элементом-предком, отвечает за события, которые запускаются на его потомках. Обработчик, передаваемый в.live(), никогда не привязывается к элементу; вместо этого.live() связывает специальный обработчик с корнем дерева DOM.

если вы добавляете элементы позже через PHP, могут возникнуть некоторые конфликты... это мое лучшее предположение, не видя код.

Источник

Вы также можете использовать только toggle вместо slideToggle,

увидеть это: https://jsfiddle.net/st6v9as0/2/

Источник
Другие вопросы по тегам