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

Question

У меня странная проблема с двумя ползунками. Слайд #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>

Answer 1

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

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

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

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

onclick='toggleForm(event)'

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

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

Answer 2

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

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

Другой, более простой вариант, это не использовать тег href = in link "a" или ввод ввода для целей переключения в пределахстр.Просто используйте что-то вроде:

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

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

Answer 3

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

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