顯示隱藏DIV＆密切與焦點輸入

Question

嗨淡入淡出我使用此代碼顯示在輸入焦點隱藏的div

這裏是HTML，請看看@jsfiddle也

<div id="divone"> 
    <input class="url_field" /> 
</div> 
<div id="first" class="content"> 
    First 
    <input class="close" type="button" value="X"/> 
</div> 
<div id="last" class="content"> 
    Last 
    <input class="close" type="button" value="X"/> 
</div> 

JavaScript代碼段：

$(document).ready(function() { 
    $(".url_field").focus(function() { 
     $(this).next(".content").fadeout('slow').css('display', 'inline'); 
    }); 

    $('.url_field').focus(function() { 
     $('.content').hide(); 
     $('#' + this.rel + '').show(); 
     return false; 
    }); 
    $('.content input.close').click(function() { 
     $(this).parent().hide(); 
    }); 
}); 

請幫幫我，它不工作

Answer 1

$(document).ready(function() { 

    $('.url_field').focus(function() { 
     //$(this).next(".showdiv").fadout('slow').css('display', 'inline'); not sure what this does so commented it out 
     $('.content').hide(); 
     $('#' + $(this).attr('rel')).show(); // you also don't have a rel on the input so this won't do anything 
     return false; 
    }); 

    $('.content input.close').click(function() { 
     $(this).parent().hide(); 
    }); 
}); 

你也許希望你的CSS以顯示塊開始，除非你開始隱藏然後顯示它們 - 但是然後你需要添加rel =「last」或rel =「first」到你的輸入