1

2 つの slideToggles で奇妙な問題が発生しています。#bannerChoice スライドは問題なく動作しますが、開いたときに #bannerChoice と重なるはずの #search スライドは、途中までしか開きません。代わりに、ページを強制的にリロードします。

これが私のコードです：

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>
4

3 に答える 3

11

jQuery が原因でページが更新されていません。スパン内のリンクをクリックすると、ページは URL "" に移動します。つまり、現在のページをリロードします。

e.preventDefault()リンクがデフォルトのアクション (リンクに移動) を実行しないようにするには、スクリプトに追加する必要があります。

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

eventそして、あなたの呼び出しに追加する必要があります:

onclick='toggleForm(event)'

bannerChoice()は、デフォルト アクションの一部として投稿されないキャンセル ボタン上にあるため、ページをリロードしません。

他の人がここで言ったように、インライン Javascript は良い考えではありません。コードが読めなくなり、デバッグが困難になり、コードを簡単に再利用できなくなります。jQuery でインライン Javascript を使用する (正当な) 理由はありません。

于 2012-03-07T17:34:09.060 に答える
1

私は同じ問題を使用して

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

別のより単純なオプションは、ページ内のトグルを目的として、リンク「a」タグまたは入力送信で href= を使用しないことです。次のようなものを使用してください：

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

または、あなたの場合、ボタンのようにスタイル設定されたスパン div です。

于 2014-03-07T14:55:32.103 に答える
0

ページをリロードせずに css をリロードする簡単な方法はありますか?

サーバーへの往復なしで機能する innerHtml プロパティを使用します。

于 2012-03-07T17:30:21.773 に答える