褪色在點擊一個div，但然後點擊任何地方隱藏一個元素

我幾乎所有以前提出的問題，但我無法弄清楚。褪色在點擊一個div，但然後點擊任何地方隱藏一個元素

我有這樣一個簡單的歡迎頁面，包含幾行。在這個內容中有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>

你能幫我如何隱藏我的那些信息部分？

來源

2013-06-12 demyr

你可以那樣做：

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(); 


    }); 
});

來源

2013-06-12 11:43:10

感謝您的幫助烤。你的一個看起來更復雜一些，包含JQuery中的css，但我也會研究它！ – demyr

你當然可以把CSS放在javascript之外。這個想法是爲了避免任何委託事件通常是文件級別的慣例，以避免。使用pXl的答案，每次你點擊文檔中的任何地方時，這將會觸發綁定到文檔的函數，即使沒有使用info1元素。 –

嗨，再次烤。我剛剛嘗試過你，我發現它似乎更好。至少它允許我用鼠標複製那裏出現的任何信息，它不會消失。謝謝 – demyr

您可以添加這個隱藏信息

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

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

來源

2013-06-12 11:46:10

它的工作！非常感謝pXL – demyr

@demyr歡迎您！ –

褪色在點擊一個div，但然後點擊任何地方隱藏一個元素

回答

相關問題