展开收起divs

我有不同的divs，我想单击一个div并展开它的内容，如果我再次单击它应该隐藏该内容，这是工作正常，但我有不同的divs，我只想要一个div在同一时间扩大，我应该如何达到？展开收起divs

这是不好的，你在这个时候我能有几个div的扩大看，我怎么能确保不会出现这种情况？：

这是我想达到什么：

jQuery函数，我怎么能折叠任何其他扩展格，当我点击一个新的？：

$(".contact_item .head").click(function() { 
      if ($(this).parent('div').hasClass('expanded')) { 
       $(this).next('div').slideUp(); 
       $(this).parent('div').removeClass('expanded'); 
      } else { 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 
     });

HTML代码：

<div class="container"> 
      <div class="row"> 
       <div class="col-lg-3 col-md-3 col-sm-3"> </div> 
       <div class="col-lg-9 col-md-9 col-sm-9 white"> 
        <div class="row"> 
         <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style> 
          <div class="title">Contact us</div> 
          <div class="row"> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
                                        <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One Embarcadero Center Suite 500, San Fransisco, 94111, CA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (415) 639-3001 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (727) 578-2800 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (0207) 101-9395 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 123 Fake st , Springfield, 12345, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 555 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
             <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 4449 Easton Way 2nd Floor, Columbus, 43219, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (614)526-8754 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One International Plaza Suite 550, Philadelphia, 19113, PA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (215) 279-5845 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 950 Echo Lane Suite 200, Houston, 77024, TX 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (832) 586-0301 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 1100 Dexter Avenue North Suite 100, Seattle, 98109, WA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (253)271-9692 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
          </div> 
         </div>

UPDATE：这是CSS

.contact_item { 
     width: 100%; 
     border: 1px solid #f1e7e0; 
     background-color: #fcf6f5; 
     margin: 3px 0px; 
     float: left; 

     &.expanded { 
      .head .name { 
       color: #f60; 
      } 

      .head .name span { 
       border-color: #f60; 
       color: #f60; 

       &.plus { 
        display: none; 
       } 

       &.minus { 
        display: block; 
       } 
      } 
     } 

     .head { 
      .name { 
       font-family: "Tahoma"; 
       color: rgb(100, 100, 100); 
       font-size: 11.1px; 
       text-transform: uppercase; 
       padding: 7px 15px; 
       cursor: pointer; 
       position: relative; 

       span { 
        position: absolute; 
        display: block; 
        width: 20px; 
        height: 20px; 
        border-radius: 50%; 
        border: 1px solid #706f6f; 
        text-align: center; 
        right: 15px; 
        top: 7px; 
        font-size: 18px; 
        line-height: 17px; 

        &.minus { 
         display: none; 
        } 
       } 
      } 
     } 
    }

我已经改变了一点点我的JQuery功能，现在它仅允许一个DIV扩大，但我必须单击两次扩大一个div ，第一次它关闭任何其他扩展格，但无法打开，我点击了一个，然后第二次被打开：

$(".contact_item .head").click(function() {    
      if ($(".contact_item .head").parent('div').hasClass('expanded')) { 
       $(".contact_item .head").next('div').slideUp(); 
       $(".contact_item .head").parent('div').removeClass('expanded'); 

      } else { 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 
     });

来源

2016-10-04 AlexGH

（无关的问题）审查第二为例 – litelite

@litelite感谢当你错过了地址俄亥俄州办公室 – AlexGH

这些都是很好的建议，但并没有完全工作，终于这是我做了什么与我的功能，现在它的工作原理：

$(".contact_item .head").click(function() { 
      var flag = $(this).parent('div').hasClass('expanded');    
      if ($(".contact_item .head").parent('div').hasClass('expanded')) { 
       $(".contact_item .head").next('div').slideUp(); 
       $(".contact_item .head").parent('div').removeClass('expanded');     
       if (flag==false) { 
        $(this).parent('div').addClass('expanded'); 
        $(this).next('div').slideDown(); 
       } 
      }   
      else { 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 
     });

来源

2016-10-04 17:51:58 AlexGH

我试图实现您的要求：

https://jsfiddle.net/pje7Lznf/

<div class="container"> 
      <div class="row"> 
       <div class="col-lg-3 col-md-3 col-sm-3"> </div> 
       <div class="col-lg-9 col-md-9 col-sm-9 white"> 
        <div class="row"> 
         <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style> 
          <div class="title">Contact us</div> 
          <div class="row"> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
                                        <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One Embarcadero Center Suite 500, San Fransisco, 94111, CA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (415) 639-3001 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (727) 578-2800 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (0207) 101-9395 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 123 Fake st , Springfield, 12345, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 555 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
             <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 4449 Easton Way 2nd Floor, Columbus, 43219, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (614)526-8754 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One International Plaza Suite 550, Philadelphia, 19113, PA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (215) 279-5845 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 950 Echo Lane Suite 200, Houston, 77024, TX 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (832) 586-0301 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 1100 Dexter Avenue North Suite 100, Seattle, 98109, WA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (253)271-9692 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
          </div> 
         </div> 

$(".contact_item .head").click(function() { 

      if ($(this).parent('div').hasClass('expanded')) { 
       $(this).next('div').slideUp(); 
       $(this).parent('div').removeClass('expanded'); 
       $(".info").each(function(i , obj){ 
        console.log($(obj)) 
        $(obj).removeClass('expanded'); 
        $(obj).slideUp(); 
       }) 
      } else { 
       $(".info").each(function(i , obj){ 
        console.log($(obj)) 
        $(obj).removeClass('expanded'); 
        $(obj).slideUp(); 
       }) 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 


     }); 

.contact_item{ 
    background-color: #bdc3c7; 
    color: white; 
    margin-bottom: 10px 
}

来源

2016-10-04 17:03:19 Alessandro

我放在一起摆弄着一个简单的基于CSS的解决方案，让jQuery代码被归结为这样的事：

$('.contact_item').on('click', '.head', function() { 
    var clicked = $(this).closest('.contact_item'); 
    $('.contact_item.expanded').add(clicked).toggleClass('expanded'); 
});

该解决方案与动画摒弃，但这是我处理很多这种类型的情况的方式，而且它比较干净。这应该是一个相当简单的练习，从此处添加动画回来，如果有必要，但考虑此方案作为一个不错的选择：

Fiddle w/ solution

来源

2016-10-04 17:10:07

展开收起divs

回答

相关问题