Question

我几乎听过任何先前提出的问题，但我无法理解。

我有一个包含几行的简单欢迎页面。在该内容中，有2个链接显示下面的一些信息（这些信息被CSS隐藏）。当您单击其中任何一个时，您可以在下面看到它，Jquery隐藏另一个。它工作正常。

但是当我点击任何地方时我需要隐藏它们：

$(document).ready(function () {
    var container = $('#info_area');
    $('#contentart span').click(function () {
        var active = $(container.find('div')[$(this).prevAll('span').length]);
        active.siblings().hide();
        active.fadeIn("slow");
    });
});

和html

<body>
<div id="wrap">
     <section id="headerall">
        <header>Welcome</header>
          <div class="clr"></div>   
     </section>
                   <div class="clr"></div>
     <section id="content">
       <article id="contentart">
          <p id="contentp">
             content content content content content content content conten content content content; fade in link 1 <span class="mailgsminfo1">info 1</span> or or or <span class="mailgsminfo2">info 2</span> content text content text.<br /> Thanks
          </p>
                   <div class="clr"></div>
       </article>
       <article id="info_area">
         <div class="info1"><span class="title">info 1:</span> info 1 must show here</div>
         <div class="info1"><span class="title">info 2:</span> info 2 must show here</div>
       </article>
     </section>

         <div class="clr"></div>

</div> <!-- Wrap ende -->
</body>

你能帮我隐藏一下这些信息部分吗？

Answer 1

你可以这样做：

http://jsfiddle.net/Tks5L/1/

$(document).ready(function () {
    $('.info1').css('outline',0).attr('tabindex', -1).on('focusout', function () {
        $(this).hide();
    });

    var container = $('#info_area');

    $('#contentart span').click(function () {
        var active = $(container.find('div')[$(this).prevAll('span').length]);
        active.siblings().hide();
        active.fadeIn("slow").focus();


    });
});

Answer 2

您可以添加此内容以隐藏信息

$(document).on('click', function (e) {
    if (!$(e.target).is('#contentart span')) {
        $('#info_area div').hide();
    }
});

演示---> http://jsfiddle.net/Tks5L/3/

fade在一个div中单击，但随后单击任意位置以隐藏元素

2 个答案: