0

3 つの部分で構成されるフォームを作成しています。jqueryのヘッダー部分をクリックするのではなく、「次へ」ボタンをクリックして別のフォームに移行したい。私はフォームにjqueryアコーディオンを実装し、次へと戻るボタンを介して他のものにシフトしました。しかし、アコーディオンのリンクまたはヘッダーを非表示にすることはできません。そのリンク（アコーディオンのヘッダー）を非表示にしたい よろしくお願いします

<h1 class="top bottom"><span>Help me</span> Buy and Sell a House</h1>
<h2>This form is quick &amp; easy to complete - in only 3 steps!</h2>

<form name="cmaForm" id="cmaForm" method="post">

    <input type="hidden" name="recordRequestPrimaryServiceID" id="recordRequestPrimaryServiceID" value="100" />
    <input type="hidden" name="recordClientServices" id="recordClientServices" value="1,3" />

    <ul id="stepForm" class="ui-accordion-container">
    <li id="sf1">
        <a href='#' class="ui-accordion-link"> </a>
        <div>
            <div class="buttonWrapper">
                <input name="formNext1" type="button" class="open1 nextbutton" value="Next" alt="Next" title="Next" />
            </div>
        </div>
    </li>
    <li id="sf2">
        <a href='#' class="ui-accordion-link"></a>
        <div>
            <div class="buttonWrapper">
                <input name="formBack0" type="button" class="open0 prevbutton" value="Back" alt="Back" title="Back" />
                <input name="formNext2" type="button" class="open2 nextbutton" value="Next" alt="Next" title="Next" />
            </div>
        </div>
    </li>
    <li id="sf3">
        <a href='#' class="ui-accordion-link"></a>
        <div>
            <div class="buttonWrapper">
                <input name="formBack1" type="button" class="open1 prevbutton" value="Back" alt="Back" title="Back" />
                <input name="submit" type="submit" id="submit" value="Submit" class="submitbutton" alt="Submit" title="Submit">
            </div>
        </div>
    </li>
</form>

そして、javascriptでは、ボタンクリックのイベントでコードを作成して、異なるフォームを切り替えます

 <script>
        $(document).ready(function(){
            //display the form in the accordion
            var accordion = $('#stepForm').accordion();
            var current = 0;

            $('.open1').on('click',function(){
                accordion.accordion("option", "active", 1);
                current = 1;
            });

            $('.open2').on('click',function(){
                accordion.accordion("option", "active", 2);
                current = 2;
            });

            $('.open3').on('click',function(){
                accordion.accordion("option", "active", 3);
                current = 3;
            });

            $('#sf3 .prevbutton').on('click', function(){
                accordion.accordion("option", "active", 1);
                current = 1;
            });

            $('#sf2 .prevbutton').on('click', function(){
                accordion.accordion("option", "active", 0);
                current = 0;
            });
 });
    </script>

しかし今では、ユーザーはヘッダーをクリックすることでもさまざまなフォームを切り替えることができます。その機能を無効にするか非表示にしたい（最善の方法です）。

4

1 に答える 1

0

アコーディオンのイベントを無効にすることができます。ボタンをクリックするコードは引き続き機能します。

accordion.accordion({event: false});

ホバーしたときにヘッダーがリンクのように見えないように、この行にも追加しました。ただし、これのcssを変更できます

$('.ui-accordion-header').css('cursor', 'default');

http://jsfiddle.net/Z9PbM/

于 2013-07-25T04:41:43.890 に答える