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

试试这个 - 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 2

此处：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();
});

Answer 3

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

$('##'+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

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

3 个答案: