javascript - 窗口右侧的输出损坏
问题描述
有一个网站
我给代码
document.getElementById('dropdownwindow').style.position = "fixed";
document.getElementById('dropdownwindow').style.marginLeft = "0";
document.getElementById('dropdownwindow').style.marginTop = "0";
document.getElementById('dropdownwindow').style.display = "block";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight = "20%";
document.getElementById('dropdownwindow').style.width = "80%";
/*document.getElementById('dropdownwindowright').style.marginRight="20%";
document.getElementById('dropdownwindowright').style.marginLeft="20%";
document.getElementById('dropdownwindowright').style.width="60%";
*/
document.getElementById('dropdownwindowright').style.flex = "60%";
/*divfreespace.style.width="20%";
divmenuleft.style.display="block";
divmenuright.style.display="block"; divmenusearch.style.display="block";
divfreespace.style.display="block";*/
document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
/*
const menuelems = document.querySelectorAll('.menulistitem');
menuelems.forEach((menuelem) => {
menuelem.addEventListener('mouseover', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.add('menulistitem_selected')
});
menuelem.addEventListener('mouseout', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.remove('menulistitem_selected')
});
});
*/
const smartphonesandgadgets = document.querySelector('#smartphonesandgadgets');
smartphonesandgadgets.addEventListener('mouseover', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.add('menulistitem_selected');
fetch('../html/smartphonesandgadgets.html').then(response => {
document.querySelector('#CatalogMenuRight').innerHTML += response.text;
});
});
smartphonesandgadgets.addEventListener('mouseout', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.remove('menulistitem_selected');
document.querySelector('#CatalogMenuRight').innerHTML = "";
});#dropdownwindow {
display: none;
margin-left: 0;
margin-right: 100%;
height: 100vh;
z-index: 5;
}
#fullblock {
height: 100vh;
position: static;
}
.contentdropdownwindow {
display: flex;
/*justify-content: center;*/
}
.CatalogMenuLeft {
width: 25%;
}
.CatalogMenuRight {
/*height: 1278px;*/
}
.catalogheader {
width: 100%;
height: 30%;
/*display: flex;*/
/*justify-content: center;*/
margin-left: auto;
margin-right: auto;
}
.crossline,
.bottompart {
flex: 1;
/*width: 100%;*/
/*height: 33%;*/
}
.crosslineright {
width: 100%;
/*margin-top: 40px;*/
/*margin-left: 20px;*/
/*margin-right: 20px;*/
/*align: right;*/
text-align: right;
}
.windowheader {
flex: 1;
/*width: 100%;*/
/*height: calc(100% - 2*37.5px);*/
/*height: 34%;*/
margin: auto;
text-align: center;
}
.windowheader h4 {
flex: 1;
/*width: 100%;*/
margin: auto;
text-align: center;
}
.flexdisabledscrollbar1,
.flexdisabledscrollbar2,
.flexdisabledscrollbar3 {
flex: 0;
width: 5px;
border-right: 5px solid #f5f5f6;
}
.flexline1 {
display: flex;
justify-content: center;
height: 33%;
}
.flexline2 {
display: flex;
justify-content: center;
height: 34%;
}
.flexline3 {
display: flex;
justify-content: center;
height: 33%;
}
.flexcontent {
display: flex;
/*overflow-y: scroll;*/
}
#menulist {
flex: 1;
overflow: auto;
height: 400px;
}
.menulistitem {
padding-top: 5px;
padding-bottom: 5px;
}
/* Works on Firefox */
#menulist {
scrollbar-width: auto;
scrollbar-color: #b8b8bc #f5f5f6;
/*overflow-y: scroll;*/
/*height: 200px;*/
}
/* Works on Chrome, Edge, and Safari */
#menulist::-webkit-scrollbar-button {
display: none;
}
#menulist::-webkit-scrollbar {
width: 5px;
}
#menulist::-webkit-scrollbar-track {
background: #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb {
background: #b8b8bc;
border-radius: 2.5px;
border: 0px solid #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb:hover {
background: #b8b8bc;
}
.menulistitem_selected {
font-weight: bold;
cursor: pointer;
}
.menulistitem_selected::after {
content: "\2192";
/*position: absolute;*/
margin-left: 5px;
display: inline-block;
font-weight: 400;
transition: all .1s ease;
}
.close {
margin-top: -14px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
font-size: 24px;
cursor: pointer;
display: inline-block;
}
.dropdownwindowright {
width: 75%;
}
.CatalogMenuSearch #SearchBlock {
/*border-bottom: 1px solid orange;*/
}
#SearchBlock {
padding-top: 5px;
/*padding-left: 25px;*/
margin-left: 25px;
margin-right: 50px;
/*padding-right: 50px;*/
display: flex;
/*justify-content: flex-end;*/
height: 35px;
border-bottom: 1px solid #dfdfe1;
}
#SearchInputdiv {
height: 100%;
width: calc(100%-35px);
flex: 1;
/*color: #dfdfe1;*/
/*flex: calc(100%-35px);*/
}
#SearchInput {
width: 100%;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}
#SearchButtondiv {
height: 100%;
justify-content: flex-end;
width: 35px;
/*flex: 35px;*/
}
#SearchButton button svg {
vertical-align: middle;
fill: #dfdfe1;
/*justify-content: flex-end;
flex: 35px;*/
}
#SearchButton {
outline: none;
border: none;
background: transparent;
cursor: pointer;
}
#SearchButton:active {
outline: 1px solid blue;
}<div id="dropdownwindow">
<div class="contentdropdownwindow">
<div class="CatalogMenuLeft">
<div class="catalogheader">
<div class="flexline1">
<div class="crossline">
</div>
<div class="flexdisabledscrollbar1">
</div>
</div>
<div class="flexline2">
<div class="windowheader">
<h4>Каталог</h4>
</div>
<div class="flexdisabledscrollbar2">
</div>
</div>
<div class="flexline3">
<div class="bottompart">
</div>
<div class="flexdisabledscrollbar3">
</div>
</div>
</div>
<div class="flexcontent">
<div class="windowmenulist" id="menulist">
<div class="menulistitem" id="smartphonesandgadgets">
Smartphonesandgadgets
</div>
<div class="menulistitem" id="notebooksandpcs">
Ноутбуки и компьютеры
</div>
<div class="menulistitem" id="tvsaudiovideohifi">
Телевизоры, аудио-видео, Hi-Fi
</div>
<div class="menulistitem" id="householdappliancesforhomeandkitchen">
Бытовая техника для дома и кухни
</div>
<div class="menulistitem" id="constructionandrepair">
Строительство и ремонт
</div>
<div class="menulistitem" id="houseandcottage">
Дом и дача
</div>
<div class="menulistitem" id="photosvideossecuritysystems">
Фото, видео, системы безопасности
</div>
<div class="menulistitem" id="automotiveproducts">
Автотовары
</div>
<div class="menulistitem" id="officesuppliesfurnitureandofficeequipment">
Канцтовары, Мебель и Офисная техника
</div>
<div class="menulistitem" id="beautyandhealth">
Красота и здоровье
</div>
<div class="menulistitem" id="sportsandrecreation">
Спорт и отдых
</div>
<div class="menulistitem" id="productsforgamers">
Товары для геймеров
</div>
<div class="menulistitem" id="discountedproducts">
Уцененные товары
</div>
<div class="menulistitem" id="giftcertificates">
Подарочные сертификаты
</div>
<div class="menulistitem" id="services">
Сервисы и услуги
</div>
</div>
</div>
</div>
<div class="myscroll">
</div>
<div id="dropdownwindowright">
<div class="crosslineright">
<div class="close">×</div>
</div>
<div class="CatalogMenuSearch">
<div id="SearchBlock">
<div id="SearchInputdiv">
<input type="search" placeholder="Поиск по товарам" id="SearchInput">
</div>
<div id="SearchButtondiv">
<button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
</div>
</div>
</div>
<div class="CatalogMenuRight" id="CatalogMenuRight">
</div>
</div>
</div>
</div>告诉我如何在.CatalogMenuRight. 这个块应该显示文件的内容smartphonesandgadgets.html。该smartphonesandgadgets.html文件的内容是
<h1 class="headercontent">Smartphonesandgadgets</h1>
<div class="menucategoryitem">
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Smartphone</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
</div>镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容 镇流器内容压载内容 压载内容 压载内容 压载内容 压载内容 压载内容
解决方案
推荐阅读
- algorithm - 从 ACM ICPC 2018 世界总决赛赶上飞机问题
- sas - 数据步骤中的类似 SAS 的运算符不起作用
- mysql - MySQL中的回滚事务
- java - 我的 GMapsFX 库文件出错
- java - 如何在没有数据库的情况下在 SpringBoot 中创建对象集合？
- fosuserbundle - Symfony4 覆盖 FosUserBundle 模板
- mongodb - 如何使用 docker images 和 docker-compose 持久化 mongo db 的默认数据和运行应用程序数据
- javascript - vue 路由器不使用相同对象的新数据更新 url
- html - 主角头像不显示
- python - 我该如何解决这个while循环？