如何修复折叠元素的线条粗细差异

Question

我有一个使用引导手风琴的网页。

有划分部分的线。我已经包含了一个截图。

当用户点击“更多”打开了手风琴。

的问题是，有在侧面每个剖面线。当一个部分打开时，该行按照该部分进行操作，因为它应该如此。但是，线条的粗细看起来不对。我无法弄清楚如何使这项工作，使它看起来相同打开或关闭。

代码共享上jsfiddle.net here

jQuery(".readmore").click(function() { 
    var thisid = jQuery(this).attr('id'); 
    var id = thisid.split("-"); 
    jQuery(".read-" + id[1] + "-text").slideDown(); 
    jQuery(this).css("display", "none"); 
}); 
jQuery(".readclose").click(function() { 
    var thisid = jQuery(this).attr('id'); 
    var id = thisid.split("-"); 
    jQuery(".read-" + id[1] + "-text").slideUp(); 
    jQuery("#read-" + id[1]).css("display", "block"); 
}); 

<div class="second-section"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <div class="expect-head little-time">Big changes in little time</div> 
       <div class="expect-body hasborder-right">TeamUp was developed from over 30 years of coaching the world's top executives. We truly understand what it takes to achieve deep, meaningful life changes, even on a busy schedule. 
         <h3 class="readmore" id="read-1">> Read More</h3> 

        <div class="read-1-text" style="display:none;">Whether you choose to create a healthier lifestyle, deeper relationships, or seek more fulfillment in your career, TeamUp will take you there. You’ll discover your patterns of behavior and consciously choose which ones to keep and which ones to change. You'll experience your life from a new and refreshing perspective. 
          <h3 class="readclose" id="close-1">> Close</h3> 

        </div> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="expect-head results">Results that last a lifetime</div> 
       <div class="expect-body hasborder-left">This course is a all about taking action. The specific action to take is determined by you. There are no formulas or a one-size-fits-all. You define your own actions based upon what you want to do differently in your life. 
         <h3 class="readmore" id="read-2">> Read More</h3> 

        <div class="read-2-text" style="display:none;">You are creative and insightful. You probably already know what you want to change. Through your weekly interactions with your teammates, and the course material, you will turn your insights into action to achieve your personal growth goals. 
          <h3 class="readclose" id="close-2">> Close</h3> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
       <div class="expect-head getsupport">Get Support from your team</div> 
       <div class="expect-body hasborder-right">Each week you'll have a 90-minute online conversation with your team members. They will listen, challenge and motivate you. You'll find the strength and courage to overcome any obstacles along the way. 
         <h3 class="readmore" id="read-3">> Read More</h3> 

        <div class="read-3-text" style="display:none;">You will also inspire change in the members of your team. You'll experience first hand how fulfilling it is contributing to others insights and personal growth. Working together is not only more effective...it's more fun. 
          <h3 class="readclose" id="close-3">> Close</h3> 

        </div> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="expect-head ontrack">We'll keep you on track</div> 
       <div class="expect-body hasborder-left">A dedicated coach facilitator will guide you, and your team throughout the course. All TeamUp facilitators have been throughly trained and mentored, maintaining the highest standards of confidentiality and integrity. 
         <h3 class="readmore" id="read-4">> Read More</h3> 

        <div class="read-4-text" style="display:none;">Our facilitators know what it takes to make long-lasting change, and will create a safe, inspirational learning environment where you can achieve profound personal growth. 
          <h3 class="readclose" id="close-4">> Close</h3> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

.second-section { 
    border-bottom: 1px solid #666666; 
} 
.second-section h2 { 
    font-size: 56px; 
    text-align: center; 
} 
.second-section .container-fluid { 
    padding: 0; 
} 
.second-section .col-md-6 { 
    padding: 0; 
    width: 50%; 
    float:left; 
} 
.expect-head { 
    color: #000; 
    padding: 35px 50px; 
    text-align: left; 
} 
.expect-head h3 { 
    line-height: inherit; 
} 
.expect-body { 
    padding: 20px 50px; 
    min-height: 210px; 
} 
.expect-body b { 
    font-weight: 600; 
} 
.readmore, .readclose { 
    color: #FF7C00; 
    cursor: pointer; 
    display: block; 
    font-size: 18px; 
    font-weight: normal; 
    line-height: inherit; 
    margin-top: 30px; 
} 
.read-1-text, .read-2-text, .read-3-text, .read-4-text { 
    margin: 40px 0 0; 
} 
.hasborder-left { 
    border-left: 1px solid #666666; 
} 
.hasborder-right { 
    border-right: 1px solid #666666; 
} 

任何帮助理解。

Answer 1

发生这种情况并不奇怪，因为您将两个边框放在同一个地方。

你到你的左边DIV输出上说的权利和输出上最右边的div的左边框的边框。这给你两个边界...

因此，你应该删除其中一个获得奇异边界。如果你想有一个更厚的边框，只需更改你想要的边框的像素。

的演示中看到这一点：http://jsfiddle.net/8hp2X/2/

.hasborder-right { 
    border-right: 2px solid #666666; 
} 

正如你可以看到，我已删除的边界，这将导致一个好看的页面之一。