隐藏/显示先隐藏一个元素，然后显示点击的项目

Question

我在表单上有三个单选按钮。当选择收音机项目时，子菜单将出现在收音机选项的正下方。当单击单选按钮时，我想要它，另一个子菜单将首先隐藏，然后会出现与当前所选单选按钮相对应的子菜单。

问题：如何在显示单击的收音机选项（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> 

Answer 1

太多的重复代码，并选择错摆在首位..

$('##'+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(); 
    } 
});​ 

Check Fiddle

编辑

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

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

UPDATED FIDDLE

Answer 2

试试这个 - DEMO

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

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

只是注意 - 如果你使用jQuery，你应该利用其事件侦听器，而不是使用onclick -s。

Answer 3

这里：Demo

$('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(); 
});