Question

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

有一行划分部分。我已经附上了截图。

当用户点击“Read More”时，手风琴会打开。

问题是每个部分都有侧面的线条。当一个部分打开时，该部分应该按照部分进行。然而，线条的厚度看起来很偏僻。我无法弄清楚如何使这项工作看起来一样开启或关闭。

enter image description here

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

正如您所看到的，我已经移除了其中一个边框，从而产生了漂亮的页面。

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

1 个答案: