顯示隱藏的div

我想顯示根據選定的單選按鈕隱藏的DIV，例如：顯示隱藏的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".option_select").click(function() { 
      if ($('#extra_options').is(":hidden")) { 
       $('#extra_options').slideDown("slow"); 
      }  
     }); 
    }); 
</script>   
</head> 

<body> 
<div id="extra_options" style="display:none;"> 
<input type="radio" name="ExtraOption" value="1" /> Extra option 1<br /> 
<input type="radio" name="ExtraOption" value="2" /> Extra option 2<br /> 
<input type="radio" name="ExtraOption" value="3" /> Extra option 3<br /> 
</div> 

<form action="#" method="post"> 
<input type="radio" name="Option" class="option_select" value="1" /> Option 1<br /> 
<input type="radio" name="Option" class="option_select" value="2" /> Option 2<br /> 
<input type="radio" name="Option" class="option_select" value="3" /> Option 3<br /> 
<input type="submit" name="submit" value="Submit" /> 
</form> 
</body> 
</html>

但我很想說#extra_options DIV附加到所選無線電按鈕（「選項1，選項2，選項3等），所以它看起來更像是」這些額外的選項與這個選項＃「。我想我可以有一個#extra_optionsX div附加到每一個單選按鈕，但我覺得那裏是任何創意？

tia

來源

2012-12-30 Analog

建議你創建的標記和CSS的方式，你希望它看起來和創造jsfiddle.net現場演示。您可以根據需要多次克隆'extra_options'，並使它們與實例無關。全部取決於你正在尋找什麼行爲 – charlietfl

你可以（：添加隱藏/改變所選擇的選項時表示編輯）

來源

2012-12-30 17:54:25 VLS

謝謝，這工作得很好。出於某種原因，如果我做$（this）.next（）。after（$（'＃extra_options'））;在ajax調用的成功函數中，它不起作用（它保留在所有選項之上），但是如果我在ajax之前設置它，那麼它確實有效。奇怪，但至少它的作品，謝謝！ – Analog

一個工作碼是here使用

if ($('#extra_options').is(":visible")) { 
    $('#extra_options').hide(); 
} 
$(this).next().after($('#extra_options')); 
$('#extra_options').slideDown("slow");

其追加。

$(document).ready(function() { 
    $('form > input').click(function(){ 
     var t = $(this), 
      extra = $('#extra_options'); 

     $('input[value=' + t.val() + ']', extra) 
      .parent() 
      .show() 
      .siblings() 
      .hide(); 

    }); 
});

更好的包裹在<label>文本所有輸入，是這樣的：<label><input type="radio" name="foo" value="bar" /> Its value here </label>

來源

2012-12-30 18:45:00 stefanz

感謝您的建議，我將添加標籤標籤。我想嘗試一下，但它並沒有像我想要的那樣工作，它一直在頂部顯示額外的選項，高於所有其他選項，而不是在section選項下方（在jsfiddle.net中也是如此） – Analog

顯示隱藏的div

回答

相關問題