Question

需要知道如何使用JQuery UI Widget控制预期的行为。 我正在使用JQuery UI Accordion来实现多部分表单/逐步用户交互。我希望隐藏/禁用后续的折叠面板，直到用户在之前的面板中完成某些操作。

你能帮我理解如何隐藏/禁用手风琴面板吗？

HTML
<div id="accordion">    
<h3><a href="#">Section 1</a></h3>
<div>
    <input type="button" value="Go to Section 2" id="button1" />
    <br/>
    <label>Section 2 can be visible/clickable only after clicking this button.</label>
</div>
    <h3><a href="#">Section 2</a></h3>
<div>
    <input type="button" value="Go to Section 3" id="button2" />
</div>
    <h3><a href="#">Section 3</a></h3>
<div>
    <input type="button" value="Go to Section 4" id="button3" />
</div>
    <h3><a href="#">Section 4</a></h3>
<div>
    <input type="button" value="Go to Section 1" id="button4" />
</div>

的JavaScript

$(function () {
$("#accordion").accordion({
    autoHeight: true
});
$("#accordion").accordion({
    collapsible: true
});
$("#button1").on("click", function () {
    $("#accordion").accordion({
        active: 1
    });
});
$("#button2").on("click", function () {
    $("#accordion").accordion({
        active: 2
    });
});
$("#button3").on("click", function () {
    $("#accordion").accordion({
        active: 3
    });
});
$("#button4").on("click", function () {
    $("#accordion").accordion({
        active: 0
    });
})

}）;

Answer 1

Demo Fiddle

$('#accordion').find('.accordion-toggle').click(function () {
    if ($(this).hasClass('disable')) {
        //If the tab is disabled, alert the user
        alert("Please complete the above details");
    }else{
        //Open the tab
        $(this).next().slideToggle('fast');
        $(".accordion-content").not($(this).next()).slideUp('fast');
    }
});
//Validate and enable/disable the next tab, currently only required validation is implemented
$('input').keyup(function(){
    if($(this).val()!=""){
        //Current textBox has value so enable the next
        $(this).parent().next('.accordion-toggle').removeClass('disable');
    }
    else{
        //Current textBox has no value so disable all the next
        $(this).parent().nextAll('.accordion-toggle').addClass('disable');
    }
});

不确定您是否可以使用jQuery UI Accordion实现所需的功能。

暂时隐藏/禁用手风琴面板

1 个答案:

Demo Fiddle