点击图片再次显示详细信息点击图片隐藏详细信息即使点击图片之外隐藏详情

Question

如果我点击图片，它会显示与图片相关的自己的详细信息。如果我单击图像上的增益，即使单击图像外部以隐藏细节，它也会隐藏细节。 Plz帮我 谢谢

注意它的工作在所有的mezor浏览器。

演示http://jsfiddle.net/mdsa/aCJk3/

HTML：

<div class="featured-chefs"> 
     <div class="shell"> 
      <div class="featured-chefs-inner"> 
       <h2>Featured Chefs</h2> 

       <ul class="clearfix"> 
        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Shaari Sulaiman</h3> 
          <h4>California/Mediterranean inspired dishes</h4> 
          <p>An East Coast native, Shaari fell in love with cooking when she moved to California more than a decade ago. She has worked under <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> some of LA’s most acclaimed chefs on both the savory and sweet sides of the kitchen, and also trained for a year in pastry and chocolate in Switzerland. Shaari has a breadth of knowledge in a variety of cuisines, with a focus on California/Mediterranean-inspired dishes. She believes above all that food should feed your soul as well as nourish your body.</span></p> 
          <div class="rating"><!-- /.rating-inner --></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry" style="overflow:hiiden;"> 
          <h3>Chrysta Wilson</h3> 
          <h4>Southern inspired New American cuisine</h4> 
          <p>Chef Chrysta Wilson is private chef, pastry chef, cookbook author, and cooking class instructor that is elated to be a partner with <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden">Tastery. She grew up in the South where made-from-scratch meals and desserts were commonplace in a food-focused family who regularly grew their own food. 
           Chrysta's culinary style is Southern-inspired New American cuisine, however, she is well versed in many cuisines. Chrysta has not only worked as a freelance chef and consultant to some of the top restaurants and catering companies in Southern California, she has also owned her own highly-rated Bakery. Her passion for good food and perfectly paired flavors led to the development of her award-winning cookbook.</span></p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Tracy Evans</h3> 
          <h4>Spanish. Latin and Italian Cuisine</h4> 
          <p>Tracy’s passion for food began at a young age growing up in Northern California with her grandfather’s 64 year old grocery business.<a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> She has been cooking since age 11 and most recently owned a natural food cafe in Westwood. Prior to that Tracy spent 4 years as a Marketing Manager for Whole Foods Market. Her philosophy for food is to keep it simple and natural and let the ingredients speak for themselves and her specialty is Spanish, Latin and Italian Cuisine.</span></p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Camille Cothron</h3> 
          <h4>Southern-inspired but with a lighter souther CA touch</h4> 
          <p>Camille Cothron has had a passion for food since a young age, cultivated by watching her grandmother and mother create Southern meals <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> in her hometown of Louisville, Kentucky. Now an avid cook herself, Camille enjoys preparing meals that are often Southern-inspired but with a lighter, healthier approach influenced by her years living in Southern California. Camille and her brother, an organic farmer, often collaborate on cooking techniques & food knowledge and believe that food should always promote good health, as well as being flavorful and artistic. </span> </p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Aleya Williams </h3> 
          <h4>All Cuisines - from comfort food to fine dining</h4> 
          <p>I have a passion for food and I enjoy constructing innovative, palate dancing flavor profiles that make my clients smile. I began my <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> culinary journey after obtaining my B.S. in Business Administration from the University of Southern California and working in the corporate arena. Although I have successfully worked within the marketing and communication industries, I decided to shift into the culinary industry to pursue my passions. With my training from the Le Cordon Bleu College of Culinary Arts, I have worked with catering companies, private individuals and families, and within my own catering and private chef company, Culinary Princess Catering.</span> </p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Emma Calcara</h3> 
          <h4>Italian </h4> 
          <p>Emma’s father is a restaurant owner and chef and her mother and grandmother are both cooks so she grew up around food. Because she’s <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> Brazilian and Italian, food is in her blood -- it’s not just a passion but it’s part of her, her family and her culture. She’s been cooking professionally for about 15 years, and she’s also a culinary instructor. Having lived in three different countries, she has a knowledge of global cuisine that allows her to always bring a fusion/twist to her dishes. Emma is also an executive chef for a company that caters large shows at the Hollywood Bowl, San Diego Sports Arena, Garden Arena (MGM) and the Mandalay Bay event center in Las Vegas.</span></p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Tahoma Hauptman</h3> 
          <h4></h4> 
          <p>Tahoma has been in and around food service most of his life. He holds a reverence for the beauty of foods in their natural state. He <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> considers himself a life long learner and relishes his chance to grow and collaborate with Fresh Dish. Tahoma has worked in Seattle, NYC, and LA, in restaurants, catering and private homes.</span> </p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Francesca Mallus</h3> 
          <h4>Italian</h4> 
          <p>Francesca is from Italy, Sardinia, a little paradise island for people who love fine food. Her passion for food began when she was <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> a little girl and spent her free time in the kitchen with her "nonna" and her mother. Francesca has worked in restaurants and gelateria's in Italy and Los Angeles and as a private chef in Atlanta for private clients. </span></p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Stephanie Black</h3> 
          <h4>All Cuisines</h4> 
          <p>A native New Yorker, Stephanie received her first cookbook at age 7, which sparked her lifetime passion for food and cooking. After <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> graduating from Le Cordon Bleu, Pasadena, she spent time in Thailand traveling from region to region, observing and cooking with the land’s people and familiarizing herself with local farmers markets. Stephanie began her work in restaurants and residential rehabilitation facilities, but found her niche as a private chef and caterer, working for many families throughout Los Angeles and Orange County. She is flexible with all cuisines, keeping her main focus on fresh seasonal ingredients, preparing unique flavorful dishes and on creating an overall exceptional dining experience for her clients.</span></p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

        <li> 
         <div class="chef-image"> 
          <a href="#"><span></span> <img src="http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/2/000/1eb/07e/3899e5b.jpg" alt="" /></a> 
         </div><!-- /.chef-image --> 

         <div class="chef-entry"> 
          <h3>Graham Heldreth</h3> 
          <h4>Farm to table, Mediterranean and French</h4> 
          <p>Graham found his passion for food growing up in various regions of the US and on the Island of St. John. He found inspiration from <a href="javascript:void(0);" class="extend" >read more</a> 
          <span class="hidden"> the different cultures, people, and their foods, noticing that food is a way to bring people together. Working as sous chef in Berkeley, CA at a “farm to table” french bistro, he created seasonal french fare using fruits and vegetables from their private 50 acre organic farm, while also utilizing humanely raised meats, game and poultry. Currently, he is chef de partie at Bouchon Bistro of Beverly Hills, a premiere restaurant of chef , Thomas Keller. Graham's food philosophy is Fresh, Simple, and Delicious three words that have stayed with him throughout his career. He specializes in farm to table cuisine with an emphasis on Mediterranean and French. </span></p> 
          <div class="rating"></div><!-- /.rating --> 
         </div><!-- /.check-entry --> 
        </li> 

       </ul> 
      </div><!-- /.featured-chefs-inner --> 
     </div><!-- /.shell --> 
    </div><!-- /.featured-chefs --> 

CSS：

.shell { 
width: 947px; 
margin: 0 auto; 
position: relative; 
} 
.featured-chefs h2 { 
font-size: 32px; 
line-height: 32px; 
font-weight: normal; 
color: #2c2c2c; 
padding-bottom: 40px; 
} 
.featured-chefs ul { 
list-style: none; 
margin-left: -20px; 
} 
.featured-chefs ul li { 
float: left; 
display: inline; 
margin: 0 0 20px 20px; 
position: relative; 
} 
.chef-image a { 
display: block; 
position: relative; 
/*width: 159px; 
height: 159px;*/ 
    margin:10px; 
} 
.chef-image span { 
background: url(images/red-overlay.png) repeat 0 0; 
position: absolute; 
top: 0; 
left: 0; 
width: 159px; 
height: 159px; 
display: none; 
} 

.chef-entry { 
display: none; 
position: absolute; 
top: 0; 
left: 179px; 
width: 310px; 
height: 151px; 
background: #fff; 
z-index: 200; 
padding: 8px 15px 0 13px; 
} 
.chef-entry h3 { 
color: #f53f3f; 
font-weight: normal; 
font-size: 16px; 
line-height: 24px; 
padding-bottom: 7px; 
} 
.chef-entry h4 { 
font-size: 13px; 
font-weight: normal; 
color: #818181; 
font-style: italic; 
padding-bottom: 7px; 
} 
.chef-entry p { 
font-size: 14px; 
line-height: 24px; 
color: #4a4a4a; 
} 
.chef-entry .rating { 
height: 10px; 
width: 65px; 
position: absolute; 
top: 14px; 
right: 15px; 
} 

Answer 1

首先，您使用的 “宽”，所以整个项目将可以点击。将其更改为利润，这里是：

.chef-image a { 
    display: block; 
    position: relative; 

    /*width: 159px; 
    height: 159px;*/ 

    margin:10px; 
} 

而且，你错过了浮动离开，你的DIV适合所有项目

.featured-chefs ul { 
list-style: none; 
margin-left: -20px; 
float:left; 
} 

现在在JavaScript中，你的代码必须是此完成你想要什么：

//store when you clicked in a item to show detail 
var dontHide = false; 

//single image 
$('.chef-image a').on('click', function(e){ 
    e.preventDefault(); 

    //check if details is open 
    if($(this).parent().parent().find('.chef-entry').css('display') == 'block') 
    { 
     //close details 
     $('.chef-entry').hide();   
    }else{ 
     //close previous details 
     $('.chef-entry').hide(); 

     //show clicked and set to 'featured-chefs-inner' to dont close in next click 
     $(this).parent().parent().find('.chef-entry').show(); 
     dontHide = true; 
    } 

}); 

//All chefs area 
$('.featured-chefs-inner').on('click', function(e){ 

     if(!dontHide) 
     { 
      //hide previous details 
      $('.chef-entry').hide(); 
     }else{ 
      //dont hide because you clicked in an image 
      dontHide = false; 
     } 

}); 

看到它的工作：http://jsfiddle.net/aCJk3/4/