从表单隐藏手风琴的标题(链接)

时间:2013-07-24 07:55:45

标签: javascript jquery jquery-ui

我正在创建一个由三部分组成的表单。我想通过单击“下一步”按钮切换到其他形式,而不是单击jquery的标题部分。我已经在表单中实现了jquery手风琴,并通过next和back按钮切换到其他手风琴。但我无法隐藏手风琴的链接或标题。我想隐藏那个链接(手风琴的标题) 提前致谢

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

但现在用户也可以通过点击标题在各种表单之间切换。我想禁用或隐藏(最好)该功能。

1 个答案:

答案 0 :(得分:0)

您可以禁用手风琴的事件。点击代码的按钮仍然有效。

accordion.accordion({event: false});

我还添加了这一行,以便在您悬停时标题看起来不像链接。您可以通过

修改css

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

http://jsfiddle.net/Z9PbM/