问题：您好，我正在尝试修改网站，以便添加一个右侧栏，该栏的折叠方式类似于现有的左侧栏。
由于我是吉他手，而不是开发人员，所以我发现对网站进行反向工程并添加其他侧边栏功能有些棘手。
这是我正在处理的示例页面：
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
首先，我在主要内容区域中添加了一个包装器，以便右侧边栏出现在主要内容旁边。我这样做是
<div class="mywrapper" style = "display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%
position: relative;">
<div class="ld-focus-content" style = "display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;">
main content
</div> <!--/.ld-focus-content-->
<div class = "myrightsidebar" style = "display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 5em;
position: fixed;">
my right sidebar
</div>
</div> <!--mywrapper-->
该右侧边栏出现在主要内容的左侧，我知道这与其父包装的相对位置有关。
但是我不确定如何更改，以便1）看起来向右，2）当存在一定的最小宽度时，它会折叠到现有的左侧边栏中。
以下是与折叠有关的javascript：
$('body').on('click', '.ld-focus-sidebar-trigger', function(e) {
if ($('.ld-focus').hasClass('ld-focus-sidebar-collapsed')) {
openFocusSidebar();
} else {
closeFocusSidebar();
}
});
$('body').on('click', '.ld-mobile-nav a', function(e) {
e.preventDefault();
if ($('.ld-focus').hasClass('ld-focus-sidebar-collapsed')) {
openFocusSidebar();
} else {
closeFocusSidebar();
}
});
var windowWidth = $(window).width();
$(window).on('orientationchange', function() {
windowWidth = $(window).width();
});
$(window).on('resize', function() {
if ($(this).width() !== windowWidth) {
setTimeout(function() {
focusMobileCheck();
}, 50);
}
});
function focusMobileCheck() {
if ($(window).width() < 768) {
closeFocusSidebar();
} else {
openFocusSidebar();
}
}
function closeFocusSidebar() {
$('.ld-focus').addClass('ld-focus-sidebar-collapsed');
$('.ld-mobile-nav').removeClass('expanded');
positionTooltips();
}
function openFocusSidebar() {
$('.ld-focus').removeClass('ld-focus-sidebar-collapsed');
$('.ld-mobile-nav').addClass('expanded');
positionTooltips();
}
也许某处还有其他代码，但这似乎是折叠左侧边栏的主要部分。同样在css中，我们在左侧边栏有这个
.learndash-wrapper .ld-focus .ld-focus-sidebar { position: fixed; left: 0; top: 0px; bottom: 0; width: 350px; background-color: white; border-right: 1px solid #e2e7ed; padding-top: 50px; padding-bottom: 75px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 99; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-wrapper { overflow-x: visible; overflow-y: auto; height: 100%; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger { position: absolute; height: 75px; width: 50px; right: 0; top: 0; bottom: 0; background: #00a2e8; z-index: 99; cursor: pointer; color: white; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon { position: absolute; border-radius: 100%; background: inherit; right: 0; top: 50%; -webkit-transform: translateY(-50%) translateX(25%); -ms-transform: translateY(-50%) translateX(25%); transform: translateY(-50%) translateX(25%); font-size: 0.8em; padding: 8px; z-index: 9; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:hover .ld-icon:before { opacity: 0.5; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading { background-color: #00a2e8; color: white; border-bottom: 0; min-height: 75px; overflow: visible; width: 350px; position: relative; z-index: 9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0.75em 3.125em 0.75em 1em; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a { color: #fff; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3 { font-size: 1em; margin: 0; line-height: 1.35em; padding: 0 0 0 1.6em; font-weight: bold; opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; color: white; position: relative; z-index: 100; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3 a { color: white; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3 .ld-icon { position: absolute; left: 1px; top: 3px; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-expand-button { color: white; /* TODO: Should this be hidden? */ display: none; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-home-link { color: white; padding: 0; border-left: 0; margin-left: 0; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation { position: relative; overflow: visible; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-course-navigation-list { opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-expanded { margin: 0; border-radius: 0; background: transparent; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-expanded .ld-table-list-items { padding: 0.5em; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading { padding: 0 1em; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading .ld-lesson-section-heading { margin-bottom: 0; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list { background-color: #f0f3f6; border-radius: 0; padding: 1em 1em; position: relative; margin: 0; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list:before { content: ''; position: absolute; width: 16px; height: 16px; top: -8px; left: 66px; background: white; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 9; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list:before { background-color: white; left: 43px; width: 13px; height: 13px; top: -7px; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item { font-size: 0.875em; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item .ld-table-list-item-preview { padding: 0.5em; padding-left: 1.6em; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item { border-bottom: 1px solid #e2e7ed; background-color: white; padding: 0; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item .ld-lesson-item-preview { padding: 1em; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-pagination { margin: 1em 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-pagination .ld-pages { background-color: #728188; -webkit-box-flex: 0; -ms-flex: 0 0 120px; flex: 0 0 120px; }
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-pagination .ld-pages i, .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-pagination .ld-pages span { color: white; }
这是崩溃的原因
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed { /* .ld-focus-header { .ld-brand-logo { flex: 0 0 50px; } }*/ }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar { background-color: transparent; -webkit-transform: translateX(-webkit-calc(-100% + 50px)); -ms-transform: translateX(calc(-100% + 50px)); transform: translateX(calc(-100% + 50px)); }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar-wrapper .ld-focus-sidebar-trigger .ld-icon { -webkit-transform: translateY(-50%) translateX(45%) rotate(180deg); -ms-transform: translateY(-50%) translateX(45%) rotate(180deg); transform: translateY(-50%) translateX(45%) rotate(180deg); }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-course-navigation .ld-course-navigation-heading { top: 0; }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-course-navigation .ld-course-navigation-heading h3 { opacity: 0; }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-course-navigation .ld-course-navigation-list { opacity: 0; }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main { margin-left: 50px; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }
以及一些与左侧边栏及其父项有关的媒体查询：
@media (max-width: 1280px) { .learndash-wrapper .ld-focus .ld-focus-header .ld-progress { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu { -webkit-box-flex: 0; -ms-flex: 0 1; flex: 0 1; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-text { display: none; } }
@media (max-width: 1024px) { .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-text { display: none; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo { -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; }
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content { padding-left: 3em; } }
@media (max-width: 768px) { .learndash-wrapper .ld-focus .ld-focus-header { position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: auto; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo { display: none; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav { display: block; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding: 0 1em; margin: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 0; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-stats { text-align: center; display: block; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-percentage { line-height: 1em; margin-bottom: 0.3em; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-steps { display: none; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar { margin: 0; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; border-left: 0; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions { border-top: 1px solid #efefef; background: #fff; padding: 0; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions > * { margin: 0; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-content-action { height: auto; -webkit-box-flex: 50%; -ms-flex: 50%; flex: 50%; }
.learndash-wrapper .ld-focus .ld-focus-content { margin-top: 30px; }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-trigger { display: none; }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main { margin-left: 0px; width: 100%; }
.learndash-wrapper .ld-focus .ld-focus-main { margin-left: 0; width: 100%; }
.learndash-wrapper .ld-focus .ld-course-navigation-heading { position: static; }
.learndash-wrapper .ld-focus .ld-course-navigation { padding-top: 0; }
.learndash-wrapper .ld-focus .ld-focus-sidebar { top: 0px; padding-top: 0; z-index: 1000; position: absolute; } }
@media (max-width: 640px) { .learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main, .learndash-wrapper .ld-focus .ld-focus-main { margin-left: 0; }
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main .ld-focus-content, .learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content { margin: 30px auto 50px; padding: 5% 1.5em; } }
body.admin-bar .learndash-wrapper .ld-focus-header { top: 32px; }
@media (max-width: 768px) { body.admin-bar .learndash-wrapper .ld-focus-header { top: 0; } }
body.admin-bar .learndash-wrapper .ld-focus-sidebar { top: 32px; }
@media (max-width: 768px) { body.admin-bar .learndash-wrapper .ld-focus-sidebar { top: 93px; } }
body.ld-in-focus-mode { margin: 0; padding: 0; background: #fff; }
body.ld-in-focus-mode::before, body.ld-in-focus-mode::after { display: none; }
body.ld-in-focus-mode .learndash-wrapper { background: #fff; }
body.ld-in-focus-mode.admin-bar { padding-top: 32px; }
@media (max-width: 768px) { body.ld-in-focus-mode.admin-bar { padding-top: 0; }
body.ld-in-focus-mode.admin-bar .ld-focus-sidebar { top: 97px; } }
很抱歉粘贴所有内容，只是我不是css的哪个方面是问题的中心，也许有人可以轻松地解决这个问题并指出真正的关键。
所以...如您所见，这是一个精致的结构。我不是要任何人为我解决问题。我只是从概念上想知道，使用CSS，HTML和JS，我需要做些什么来添加右侧边栏，该边栏在最小屏幕宽度时会折叠到左侧边栏折叠区域中？
我的直觉告诉我，这应该不太困难。我不必添加很多额外的CSS。似乎我需要以某种方式采用现有的ld-focus-sidebar并以某种方式使其成为父项。然后只需添加具有适当定位属性的leftsidebar和rightsidebar包装器即可。只是不确定如何扩展现有的CSS，以及如何正确地将右侧边栏添加到现有的结构中。无论如何，我认为我向主要内容区域添加包装器类不是正确的方法。
先谢谢了， 布莱恩