0

我在表单上有三个单选按钮。当一个单选项目被选中时，一个子菜单将出现在单选选项的正下方。我想在单选按钮被点击的时候有它，其他子菜单会先隐藏，然后会出现现在选中的单选按钮对应的子菜单。

问题：如何在显示单击的单选选项（slideDown）之前向上滑动当前显示的子菜单。

注意：我正在使用 Coldfusion。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<form > 
<!--- Work Efforts --->
<input name="ArchRpt" type="radio" value="WorkEfforts" id="ArchRpt_WorkEfforts" onclick="SetArchRpts('ArchRpt_WorkEfforts');"/>
Work Efforts (WE)<br />
<div id="ArchRpt_WorkEfforts_sub" class="Indent25" style="display:none;">
    some additional form options here
</div>
<!--- Previous Week Status Updates --->
<input style="clear:both;" name="ArchRpt" type="radio" value="StautsUpd" id="ArchRpt_StautsUpd" onclick="SetArchRpts('ArchRpt_StautsUpd');" />
Previous Week Status Updates<br />
<div id="ArchRpt_StautsUpd_sub" style="display:none;">
    some additional form options here
</div>
<!--- Monthly Accomplishments REPORT --->
<input name="ArchRpt" type="radio" value="MoAccompl" id="ArchRpt_MoAccompl" onclick="SetArchRpts('ArchRpt_MoAccompl')" />
Monthly Accomplishments (MA)<br />
<div id="ArchRpt_MoAccompl_sub" style="display:none;">
    some additional form options here
</div>
</form>

和js：

<script Language="JavaScript">
function SetArchRpts(RadioOption){
$('#'+RadioOption).attr('checked', true);

if (RadioOption == 'ArchRpt_WorkEfforts'){
    $('#ArchRpt_WorkEfforts_sub').slideDown();
    $('#ArchRpt_StautsUpd_sub').slideUp();
    $('#ArchRpt_MoAccompl_sub').slideUp();
}
else if (RadioOption == 'ArchRpt_StautsUpd'){
    $('#ArchRpt_WorkEfforts_sub').slideUp();
    $('#ArchRpt_StautsUpd_sub').slideDown();
    $('#ArchRpt_MoAccompl_sub').slideUp();
}
else if (RadioOption == 'ArchRpt_MoAccompl'){
    $('#ArchRpt_WorkEfforts_sub').slideUp();
    $('#ArchRpt_StautsUpd_sub').slideUp();
    $('#ArchRpt_MoAccompl_sub').slideDown();
}
}
</script>
4

3 回答 3

1

试试这个 -演示

$("input[type=radio]").on("click", function() {
    if ( $( "#" + this.id + "_sub" ).is(":visible") ) return;

    $("div[id^=ArchRpt_]").slideUp();
    $( "#" + this.id + "_sub" ).slideDown();
});

请注意——如果你使用 jQuery，你应该使用它的事件监听器而不是使用onclick-s。

于 2012-11-01T20:57:48.790 回答
1

这里：演示

$('input[name="ArchRpt"]').on('click', function(){
    var $sub = $('#'+$(this).attr('id')+'_sub');
    $('#ArchRpt_WorkEfforts_sub, #ArchRpt_StautsUpd_sub, #ArchRpt_MoAccompl_sub').not($sub).slideUp();
    $sub.slideDown();
});
于 2012-11-01T21:03:24.477 回答
0

太多的重复代码和选择器错误首先..

$('##'+RadioOption)

应该是

$('#'+RadioOption); // Need to use only a single pound #

您可以在单个函数中编写整个代码..

$('input[name="ArchRpt"]').on('click', function() {
    if ($(this).is(':checked')) {
        $('div[id*="ArchRpt"]').slideUp();
        $(this).nextAll('div').first().slideDown();
    }
});​

检查小提琴

编辑

这只是一个黑客..你可以试试这种方式..

var checkedId = '';
$('input[name="ArchRpt"]').on('click', function() {
    if (this.id !== checkedId) {
        checkedId = this.id;
        $('div[id*="ArchRpt"]').slideUp();
        $(this).nextAll('div').first().slideDown();
    }
});​

更新的小提琴

于 2012-11-01T20:49:24.880 回答