如何确定可折叠元件的线宽差

Question

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

有一条分节的线。我包括了一张截图。

当用户单击“阅读更多”时，手风琴就会打开。

问题是，每一节都有边线。当一个区段打开时，这一行会跟在该部分后面，就像它应该做的那样。然而，线的厚度看上去是不一样的。我不知道如何使这个工作，所以它看起来一样，打开或关闭。

​

​

jsfiddle.net 这里上共享的代码

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

正如您所看到的，我删除了其中一个边框，这导致了一个漂亮的页面。