dstjh46606
2015-03-04 18:25
浏览 122

为什么javascript slidetoggle功能不能保持打开状态?

I have a link on a page that toggles the search form on and off. For example you search for Spring term classes and then you want to search for a new term and click Start a new Search. The link works great and toggles just fine...EXCEPT the toggle automatically closes again. I can't figure out why this is happening, I have searched the stack overflow site and none of the solutions seems to work (Or maybe I am still doing something wrong) Any help you can give me would be greatly appreciated. Here is the part that calls the function

<div class="course-schedule-wrapper">
    <span <?= ($show_form) ? 'style="display:none;"' : null ?> class="toggle-search"><a href="#">Start a new schedule search</a></span>
    <div id="course-schedule-search" <?= ($show_form) ? null : 'style="display:none;"' ?>>
        <form name="form" method="post" action="/schedules/">
            <input type="hidden" name="search" value="1" />
            <table summary="Course schedule search options" id="course-schedule-form">
                <tbody>
                    <tr valign="top">
                        <td nowrap="nowrap">
                            <label for="area_id" class="label">Semester:</label>
                        </td>
                        <td>

                            <!--<input type="radio" name="semester" value="2014SP" id="S2014SP" checked="checked">
                            <label class="inline" for="S2014SP">Spring 2014</label>
                            <br />
-->                         <?
                            $sflag = FALSE;
                            $fflag = FALSE;
                            if ($_POST['semester'] == '2014SU'){
                                $sflag = "checked=checked";
                            } 

                            if ($_POST['semester'] == '2014FA'){
                                $fflag = "checked=checked";
                            }

                            if(!$sflag && !$fflag) {
                                $fflag = "checked=checked";
                            } 
                            ?>

                            <input type="radio" name="semester" value="2014FA" id="S2014FA" <?= $fflag; ?>>
                            <label class="inline" for="S2014FA">Fall 2014</label>
                            <br />
                            <input type="radio" name="semester" value="2015SP" id="S2015SP" <?= $sflag; ?>>
                            <label class="inline" for="S2014SU">Spring 2015</label>
                            <br />

                        </td>
                    </tr>
                    <tr valign="middle">
                        <td nowrap="nowrap">
                            <label for="text" class="label">Search for:</label>
                        </td>
                        <td>
                            <input type="text" name="text" id="text" size="60" value="<?= ( (isset($_POST['text']) ) ? $_POST['text'] : null )?>">
                            &nbsp;
                            <div class="formtext">in course ID, title, or instructor</div>
                        </td>
                    </tr>
                    <tr>
                        <td nowrap="nowrap">
                            <label for="area_id" class="label">Area of study:</label>
                        </td>
                        <td>
                            <select name="area_id" size="1" id="area_id">

                                <option value="-1">Any Area of Study</option>

                                <?php
                                    $query = "SELECT * FROM areas WHERE inactive=0 ORDER BY name";
                                    $result = db_query($query)->fetchAll();
                                ?>

                                <? foreach( $result as $area ): ?>
                                    <option <?= ( isset($_POST['area_id']) && $area->id == $_POST['area_id'] ) ?' selected="selected" ' : null ?> value="<?=$area->id?>"><?= $area->name ?></option>
                                <? endforeach; ?>

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td nowrap="nowrap">
                            <label for="division_id" class="label">Division:</label>
                        </td>
                        <td>
                            <select name="division_id" size="1" id="division_id">

                                <option value="-1">Any Division</option>

                                <?php
                                    $query = "SELECT * FROM divisions ORDER BY name";
                                    $result = db_query($query)->fetchAll();
                                ?>

                                <? foreach( $result as $division ): ?>
                                    <option <?= ( isset($_POST['division_id']) && $division->id == $_POST['division_id'] ) ?' selected="selected" ' : null ?> value="<?= $division->id ?>"><?= $division->name ?></option>
                                <? endforeach; ?>

                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td nowrap="nowrap">
                            <label for="time1" class="label">Start time:</label>
                        </td>
                        <td>
                            <div class="formtext">from
                                <select name="time[0]" size="1" id="time1" onchange="document.form.online.checked=false;">
                                    <option value="" selected="selected">anytime</option>
                                    <option <?= (isset($_POST['time']) && '07:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="07:30">7:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '08:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="08:30">8:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '09:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="09:30">9:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '10:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="10:30">10:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '11:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="11:30">11:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '12:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="12:30">12:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '13:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="13:30">1:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '14:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="14:30">2:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '15:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="15:30">3:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '16:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="16:30">4:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '17:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="17:30">5:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '18:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="18:30">6:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '19:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="19:30">7:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '20:30' == $_POST['time'][0]) ? ' selected="selected" ' : null ?> value="20:30">8:30 PM</option>
                                </select>

                                <label for="time2">to</label>
                                <select name="time[1]" size="1" id="time2" onchange="document.form.online.checked=false;">
                                    <option value="" selected="selected">anytime</option>
                                    <option <?= (isset($_POST['time']) && '07:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="07:30">7:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '08:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="08:30">8:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '09:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="09:30">9:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '10:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="10:30">10:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '11:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="11:30">11:30 AM</option>
                                    <option <?= (isset($_POST['time']) && '12:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="12:30">12:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '13:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="13:30">1:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '14:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="14:30">2:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '15:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="15:30">3:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '16:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="16:30">4:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '17:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="17:30">5:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '18:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="18:30">6:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '19:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="19:30">7:30 PM</option>
                                    <option <?= (isset($_POST['time']) && '20:30' == $_POST['time'][1]) ? ' selected="selected" ' : null ?> value="20:30">8:30 PM</option>
                                </select>

                                (inclusive)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td nowrap="nowrap">
                            <label for="duration" class="label">Duration:</label>
                        </td>
                        <td>
                            <select name="duration" size="1" id="duration" onchange="document.form.online.checked=false;">
                                <option value="-1" selected="selected">any duration</option>
                                <option <?= (isset($_POST['duration']) && '01:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="01:00">1 hour</option>
                                <option <?= (isset($_POST['duration']) && '01:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="01:30">1.5 hours</option>
                                <option <?= (isset($_POST['duration']) && '02:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="02:00">2 hours</option>
                                <option <?= (isset($_POST['duration']) && '02:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="02:30">2.5 hours</option>
                                <option <?= (isset($_POST['duration']) && '03:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="03:00">3 hours</option>
                                <option <?= (isset($_POST['duration']) && '03:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="03:30">3.5 hours</option>
                                <option <?= (isset($_POST['duration']) && '04:00' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="04:00">4 hours</option>
                                <option <?= (isset($_POST['duration']) && '04:30' == $_POST['duration']) ? ' selected="selected" ' : null ?> value="04:30">4.5 hours</option>
                            </select>

                            <select name="durcomp" size="1" id="durcomp" onchange="document.form.online.checked=false;">
                                <option value="less"  <?= (isset($_POST['durcomp']) && 'less' == $_POST['durcomp']) ? ' selected="selected" ' : null ?>>or less</option>
                                <option value="more"  <?= (isset($_POST['durcomp']) && 'more' == $_POST['durcomp']) ? ' selected="selected" ' : null ?>>or more</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td nowrap="nowrap" class="label">Days:</td>
                        <td>
                            <table summary="Days of the week">
                                <tbody>
                                    <tr>
                                        <td align="center"><label for="M" class="formtext">M</label></td>
                                        <td align="center"><label for="T" class="formtext">T</label></td>
                                        <td align="center"><label for="W" class="formtext">W</label></td>
                                        <td align="center"><label for="R" class="formtext">R</label></td>
                                        <td align="center"><label for="F" class="formtext">F</label></td>
                                        <td align="center"><label for="S" class="formtext">S</label></td>
                                    </tr>

                                    <tr valign="top">
                                        <td align="center">
                                            <input type="checkbox" name="M" id="M" <?=( isset($_POST['M']) && "ON" == $_POST['M'] ) ? ' checked="checked" ' : null ?> value="ON">
                                        </td>

                                        <td align="center">
                                            <input type="checkbox" name="T" id="T" <?=( isset($_POST['T']) && "ON" == $_POST['T'] ) ? ' checked="checked" ' : null ?> value="ON">
                                        </td>

                                        <td align="center">
                                            <input type="checkbox" name="W" id="W" <?=( isset($_POST['W']) && "ON" == $_POST['W'] ) ? ' checked="checked" ' : null ?> value="ON">
                                        </td>

                                        <td align="center">
                                            <input type="checkbox" name="R" id="R" <?=( isset($_POST['R']) && "ON" == $_POST['R'] ) ? ' checked="checked" ' : null ?> value="ON">
                                        </td>

                                        <td align="center">
                                            <input type="checkbox" name="F" id="F" <?=( isset($_POST['F']) && "ON" == $_POST['F'] ) ? ' checked="checked" ' : null ?> value="ON">
                                        </td>

                                        <td align="center">
                                            <input type="checkbox" name="S" id="S" <?=( isset($_POST['S']) && "ON" == $_POST['S'] ) ? ' checked="checked" ' : null ?> value="ON">
                                        </td>

                                        <td align="left">
                                            <select name="dayop" size="1" id="dayop">
                                                <option value="AND" <?=( isset($_POST['dayop']) && "AND" == $_POST['dayop'] ) ? ' selected="selected" ' : null ?>>these days only</option>
                                                <option value="OR" <?=( isset($_POST['dayop']) && "OR" == $_POST['dayop'] ) ? ' selected="selected" ' : null ?>>at least these days</option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                        </td>
                    </tr>
                    <tr valign="middle">
                        <td nowrap="nowrap"><label for="online" class="label">Show online<br>courses only:</label></td>
                        <?php 
                        if($_POST['online'] == "ON") {
                            $oflag = "checked=checked";
                        } 
                        ?>

                        <td><input type="checkbox" name="online" id="online" onclick="rst()" value="ON" <?= $oflag; ?>></td>
                    </tr>
                </tbody>
            </table>
            <input type="hidden" name="currentcourse" id="inprog" value="3">
            <br>
            <input type="submit"> | <input type="reset" value="Reset"><br>

        </form>

        <hr />

        <p class="body"><strong>To register</strong>, or for more information, contact
            the <a href="../ar/">Admissions office</a> at
            217.443.8800.
        </p>

        <p class="body">Some courses have flexible schedules or have schedules that are yet to be
            determined; these are listed as TBA (To Be Arranged) and include online
            (Internet) courses, video telecourses, internships, et cetera.  If you
            search based on time, length and/or day, the results will <b>not</b>
            include such courses.
        </p>

        <p class="body">Some courses involve a lab portion that meets at a different time and/or
            on different days than the lecture portion.  If you search based on time,
            length and/or day, the results may include the lecture portion or the lab
            portion, but not necessarily both, even though both portions are
            required.
        </p>
    </div>
</div>

Here is the function information (other functions included just to make sure I am not missing anything)

jQuery(function($){

    $('#header-logo').click(function(){
        window.location = 'http://local.dannew.com/';
    });

    $(".course-schedule-wrapper .toggle-search a").click(function(e){
        e.preventDefault();
        $("#course-schedule-search").slideToggle();
    });

    $("#quicklinks").change(function(){
        if( $(this).val() != "0" )
            window.location = $(this).val();
    });

    $(".show-in-progress").click(function(){
        $('#inprog').val('1');
        $("form[name='form']").submit();
        console.log('test');
    });

    $("a").each(function(i, el){
        if( $(el).attr('href') == "/%23" || $(el).attr('href') == "..." ){
            $(el).click(function(){
                return false;
            }).css({
                "text-decoration" : "none",
                "color" : "#000",
                "cursor" : "default"
            });
        }
    });
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • doushu2699 2015-03-05 16:38
    已采纳

    I found my issue, there was an extraneous copy of the script

    $(".course-schedule-wrapper .toggle-search a").click(function(e){
            e.preventDefault();
            $("#course-schedule-search").slideToggle();
        });
    

    in one of the other files that feeds into the page. removed that copy and now it is working great! For the record this was not as simple as it sounds as for this "schedules" page the developers created 6 different files to feed this one page!

    已采纳该答案
    打赏 评论
  • drebew5059 2015-03-04 18:38

    One click handler for that selector submits a form. Submitting a form will reload a new page based on criteria set in the action url code, unless the form is submitted via ajax.

    There is no page state saved when you load a new page.

    Thus you are basically seeing the page reset itself to a new version

    打赏 评论

相关推荐 更多相似问题