html - 如何修复可折叠元素的线宽差异

Question

我有一个使用 bootstrap accordion 的网页。

有一条线将部分分开。我附上了截图。

当用户单击“阅读更多”时， Accordion 打开。

问题是每个部分的边上都有线条。当一个部分打开时，该行将跟随该部分，因为它应该如此。但是，线条的粗细看起来不对。我不知道如何让它工作，所以它看起来是一样的打开或关闭。

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;
}

如您所见，我删除了其中一个边框，从而生成了一个漂亮的页面。