0

フォームに 3 つのラジオ ボタンがあります。ラジオ項目を選択すると、ラジオ オプションのすぐ下にサブ メニューが表示されます。ラジオボタンをクリックすると、他のサブメニューが最初に非表示になり、現在選択されているラジオボタンに対応するサブメニューが表示されます。

質問: クリックしたラジオ オプション (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 #

コード全体を 1 つの関数にまとめることができます。

$('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 に答える