Jquery Slidetoggle: почему он перезагружает мою страницу?

У меня странная проблема с двумя слайдами. Слайд #bannerChoice работает нормально, но слайд #search, который при открытии должен перекрывать #bannerChoice, никогда не открывается больше, чем наполовину. Вместо этого он заставляет страницу перезагрузиться.

Вот мой код:

function bannerChoice()
{
    $('#bannerChoice').slideToggle(function()
    {
        if($('#bannerChoice').is(':visible'))
        {
            $('html').css({overflow:"hidden",height:"100%"});
        }
        else
        {
            $('html').css({overflow:"auto",height:"2171px"});
        }
    });
}

function toggleForm()
{
    $('#search').slideToggle(350);
    return false;
}

и

<div id="bannerChoice">
    <div id="bcText">Select a banner graphic:<br/></div>
    <div id="bcImages">
        <form action="#" method="post">
            <input type="hidden" name="setBanner" id="setBanner" value="">
            <img src="/media/profile/images/bgs/bg1_thumb.png"
                 onClick="setBanner(1,event);"/>
            <img src="/media/profile/images/bgs/bg2_thumb.png"
                 onClick="setBanner(2,event);"/>
            <img src="/media/profile/images/bgs/bg3_thumb.png"
                 onClick="setBanner(3,event)" />
            <img src="/media/profile/images/bgs/bg4_thumb.png"
                 onClick="setBanner(4,event)" /><br/>
            <span id="bcBttns">
                <input type="submit" value="Submit" class="submit"
                 name="bttnSubmit" /><input type="button" value="Cancel"
                 onClick="bannerChoice()">
            </span>
        </form>
    </div>

    <div id="bcBG">&nbsp;</div>
</div>

и

<span onClick="toggleForm()">
    <a href="" style="display:inline-block; color:#bbb; padding:0 13px;
        line-height:70px;">link text</a></span>
    <div style="padding-left:13px; z-index:9004">
        <form id="search" method="post" action="#">
        <input type="text" name="name" value="Name" style="width:112px"/><br/>
        <input type="text" name="city" value="City" style="width:112px" /><br/>
        <input type="text" name="state" value="State" style="width:112px" /><br/>
        <input type="text" name="zip" value="Zip" style="width:112px" /><br/>
        <input type="button" class="submit" style="margin:0 13px 0 13px;"
               value="Search">
    </form>
    </div>

person zzxjoanw    schedule 07.03.2012    source источник
comment
Не отвечая на ваш вопрос, но все эти встроенные обработчики событий (onClick) считаются довольно архаичным подходом. Вместо этого я бы предложил связывать события с JavaScript. Поскольку вы уже используете jQuery, посмотрите .on() в документации по API.   -  person Greg Pettit    schedule 07.03.2012
comment
Что со всем встроенным JavaScript? Вы используете jQuery, что делает встроенный JS совершенно ненужным.   -  person Sparky    schedule 07.03.2012
comment
Хорошо знать. Я новичок в jquery.   -  person zzxjoanw    schedule 07.03.2012


Ответы (3)


jQuery не заставляет вашу страницу обновляться. Когда вы нажмете ссылку в своем диапазоне, страница перейдет к URL-адресу «», то есть перезагрузит вашу текущую страницу.

Вам нужно добавить e.preventDefault() в свой скрипт, чтобы ссылка не выполняла действие по умолчанию (переход по ссылке):

function toggleForm(e)
{
    e.preventDefault();
    $('#search').slideToggle(350);
}

И вам нужно добавить event к вашему вызову:

onclick='toggleForm(event)'

bannerChoice() не перезагружает страницу, потому что она находится на кнопке отмены, которая не публикуется как часть действия по умолчанию.

Как уже говорили другие, встроенный Javascript - не очень хорошая идея. Это делает код нечитаемым, трудным для отладки и препятствует повторному использованию кода. Нет (веской) причины использовать встроенный Javascript с jQuery.

person Jeff B    schedule 07.03.2012
comment
Дох! Спасибо. Я положил это туда для css и забыл об этом. - person zzxjoanw; 07.03.2012
comment
jQuery делает что-то вроде магии с возвратом false, который выполняет preventDefault(). Есть веские причины использовать preventDefault(), а НЕ return false (что также останавливает распространение), но здесь вам нужен только один или другой. - person Greg Pettit; 07.03.2012
comment
Кстати, я не совсем понимаю, как вы хотите, чтобы ваш код работал, но вот пример вашего кода без встроенного javascript или CSS. jsfiddle.net/jtbowden/6H8Kp - person Jeff B; 07.03.2012
comment
@Greg: Да, я просто забыл удалить его, когда копировал. Однако этот конкретный return false не находится в обработчике jQuery, так что в этом нет никакой магии. - person Jeff B; 07.03.2012
comment
О, так теперь магии нет?? Кто ты такой, чтобы рушить мои мечты?? JK.. да, я сделал неверное слепое предположение. Ублюдки! - person Greg Pettit; 07.03.2012

У меня была такая же проблема с использованием

<a href="#" id="toggle-trigger">Edit</a>  

Другой, более простой вариант — не использовать тег href= в ссылке «a» или вводимые данные для переключения на странице. Просто используйте что-то вроде:

<a id="toggle-trigger" style="cursor: pointer;">Edit</a>  

Или, в вашем случае, div span, стилизованный под кнопку.

person Acyra    schedule 07.03.2014

Есть ли простой способ перезагрузить css без перезагрузки страницы?

Используйте свойство innerHtml, которое работает без обращения к серверу.

person Har    schedule 07.03.2012