显示隐藏div&在焦点输入时关闭fadein fadeout

时间:2012-12-19 13:58:36

标签: jquery

您好我正在使用此代码在输入焦点上显示隐藏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();
    });
});

请帮助我,它不起作用

1 个答案:

答案 0 :(得分:0)

$(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”