2014-02-09 5 views
0

У меня есть радио кнопки, что открытые 3 различных дивы (по одному)Как сделать поля исчезают после фокусировки из

Во второй DIV я добавил 4 текстовых входов, так что каждый из них должен быть открыт после щелчок в предыдущем (нажмите (функция())). Как только они будут открыты, я хочу, чтобы он снова спрятался, когда я выбираю другой переключатель и фактический 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" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("input[name$='cars']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#Cars" + test).fadeIn(2000); 
    }); 
    //fim 
    //inicio 
    $("#campo1").click(function(){ 
     $("#musicinfo").show("slow") 
    }); 
    //fim 
    //inicio 
    $("#musicinfo").click(function(){ 
     $("#music2").show("slow") 
    }); 
    //fim 
    //inicio 
    $("#music2").click(function(){ 
     $("#music3").show("slow") 
    }); 
    //fim 
}); 
</script> 

<link rel="stylesheet" type="text/css" href="estilo.css"> 
<title>Documento sem título</title> 
</head> 
<body> 

2 Cars<input type="radio" name="cars" checked="checked" value="2" /> 
3 Cars<input type="radio" name="cars" value="3" /> 
4 cars<input type="radio" name="cars" value="4" /> 

<div id="Cars2" class="desc"> 
    2 Cars Selected 
</div> 
<div id="Cars3" class="desc" style="display: none;"> 
    <input type="text" id="campo1"><br> 
    <div id="musicinfo"><input type="text" id="xxx" name="non"/></div> 
    <div id="music2"><input type="text" id="eee" name="uuu"/></div> 
    <div id="music3"><input type="text" id="www" name="ttt"/></div> 
</div> 
<div id="Cars4" class="desc" style="display: none;"> 
    4 Cars 
</div> 


</body> 
</html> 

ответ

Смежные вопросы