当点击页面上的任何地方时，jQuery禁用div

Question

这是我的评论表单＆textarea，带有隐藏的输入。

$('#c_text').click(function() {
    if ($('#hidden_part').attr('class') == 'closed') {
        $('#hidden_part').css('display','block');
        $('#hidden_part').removeClass('closed');
    } else {
        $('#hidden_part').css('display','none');
        $('#hidden_part').addClass('closed');
    };
});

当我点击时，textarea隐藏输入apper很好，但是， 如何隐藏名为#hidden_part的部件名称？ 页面上的其他地方？

Answer 1

你的意思是这样的：http://jsfiddle.net/L3gh6heg/？

<textarea id="c_text">Textarea</textarea>

<div id="hidden_part">Hidden Part</div>

$("#c_text").focusin(function () {
    $("#hidden_part").show();
});

$("#c_text").focusout(function () {
    $("#hidden_part").hide();
});

focusin检测元素何时获得焦点，focusout检测元素何时失去焦点。

jQuery还允许您在元素上调用show和hide，这可能比手动设置CSS更容易使用。

Answer 2

如果目标是在textarea聚焦时隐藏并显示bloc。使用focusins / focusout事件。

$('#c_text').focusin(function() {
   $('#hidden_part').css('display','block');      
}).focusout( function() {
   $('#hidden_part').css('display','none');
});

Avantage很简单，如果您选择带有标签导航的字段，则会调用事件。

Answer 3

单击文档时必须隐藏div内容，并在单击textarea时使用 event.stopPropagation（）; 方法，以便显示div内容，

以下是示例......

HTML代码

<textarea></textarea>
<div id="hidden_part">
     <a href="google.com">Google</a>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ipsum quam, nec blandit sapien eleifend eget. Cras cursus ullamcorper risus nec rutrum. Praesent lobortis nibh turpis. Curabitur eleifend leo ultricies efficitur dignissim. Aliquam eget dapibus nisi. Fusce dictum laoreet enim, nec blandit arcu feugiat sagittis. Mauris non dolor nec dui luctus ornare. Vestibulum pulvinar metus diam, eu vulputate leo suscipit ut. Donec eget consequat sem, et finibus lorem.</p>    
</div>

jQuery代码

$(document).click(function(){
    $("#hidden_part").hide();
});

$('textarea').click(function(event){
    $("#hidden_part").show();
    event.stopPropagation();
});

http://jsfiddle.net/dc3Lngw3/

Answer 4

法提赫，

你能试试吗

$("#c_text").click(function(ev){
    if($('#hidden_part').css("display") == "none"){
        $('#hidden_part').slideDown();
    }else{
        $('#hidden_part').slideUp();
    }
    ev.stopPropagation();

    $(document).click(function() {
             $("#hidden_part").slideUp();

    });
});

Fiddle