使隐藏元素的列表可见

问题描述 投票：0回答：2

我有两个列表，一开始它们应该被隐藏。当我单击它们旁边的（+）按钮6时，列表应平滑打开；如果我再次单击该按钮（此刻此时它应类似于（-）），则该列表应关闭。

如果在打开第一个列表的同时单击第二个列表的按钮，则第一个列表应平滑地隐藏，而第二个列表应显示；相反的情况也是如此。

我有一个非常棘手的问题：由于某些原因，当列表关闭时，（+）按钮仅在第二个列表旁边可见，并且仅当我打开第二个列表时，它才出现在第一个列表旁边。] >

我在做什么错？老实说，我什至不知道这是我的JS代码问题还是css / html出了问题。

var buttonSections = document.querySelector(".open-sections");
var buttonContacts = document.querySelector(".open-contacts");
var sectionsList = document.querySelector(".sections__list");
var contactsList = document.querySelector(".contacts__list");
var TABLET_WIDTH = 767;
buttonSections.addEventListener("click", function() {
  if (sectionsList.classList.contains("hidden")) {
    sectionsList.classList.remove("hidden");
    sectionsList.classList.add("open");
    buttonSections.style.value = "-";
    buttonSections.style.width = "16px";
    buttonSections.style.height = "1px";
  } else if (sectionsList.classList.contains("open")) {
    sectionsList.classList.remove("open");
    sectionsList.classList.add("hidden");
    buttonSections.style.value = "+";
    buttonSections.style.width = "16px";
    buttonSections.style.height = "16px";
  }
  if (contactsList.classList.contains("open")) {
    buttonSections.style.value = "-";
    contactsList.classList.add("hidden");
  }
});

buttonContacts.addEventListener("click", function() {
  if (contactsList.classList.contains("hidden")) {
    contactsList.classList.remove("hidden");
    contactsList.classList.add("open");
    buttonSections.style.value = "-";
    buttonContacts.style.width = "16px";
    buttonContacts.style.height = "1px";
  } else if (contactsList.classList.contains("open")) {
    contactsList.classList.remove("open");
    contactsList.classList.add("hidden");
    buttonSections.style.value = "+";
    buttonContacts.style.width = "16px";
    buttonContacts.style.height = "16px";
  }
  if (sectionsList.classList.contains("open")) {
    buttonSections.style.value = "-";
    sectionsList.classList.add("hidden");
  }
});
.page-footer__extra {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 77px;
  justify-content: space-between;
  margin: 0 auto;
  margin-right: 11px;
}

.page-footer__sections {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 225px;
  margin-right: 0px;
  margin-left: 13px;
}

.page-footer__sections::before {
  content: "";
  position: absolute;
  top: 44px;
  left: -300px;
  height: 1px;
  width: 1067px;
  background-color: #626962;
  opacity: 0.2;
}

.open-sections {
  position: absolute;
  top: 3px;
  right: -63px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border: 0;
  background: transparent;
  background-image: url("../img/icons/button-open-sections.svg");
  background-repeat: no-repeat;
}

.sections__list {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hidden {
  display: none;
}

.page-footer__sections--heading {
  margin-bottom: 24px;
  font-family: "Roboto Condensed";
  font-size: 15px;
  line-height: 16px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #1B2D37;
}

.sections__list--item-link {
  font-size: 15px;
  line-height: 25px;
  color: #1B2D37;
  opacity: 0.5;
}

.sections__list--item:nth-child(2n-1) {
  min-width: 165px;
}

.item__delivery,
.item__contacts {
  min-width: 114px;
}

.page-footer__contacts {
  position: relative;
  margin-top: 33px;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-right: 32px;
  margin-bottom: 26px;
}

.open-contacts {
  position: absolute;
  top: 9px;
  right: -15px;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  background-image: url("../img/icons/button-open-contacts.svg");
  background-repeat: no-repeat;
}

.page-footer__contacts--heading {
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 16px;
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  font-style: normal;
  font-weight: normal;
  color: #1B2D37;
}

.contacts__list {
  width: 270px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.contacts__list--link {
  font-size: 15px;
  line-height: 25px;
  color: #1B2D37;
  opacity: 0.5;
}
<div class="page-footer__extra">
  <!-- Sections of the website block -->
  <div class="page-footer__sections">
    <h3 class="title page-footer__sections--heading">Разделы сайта</h3>
    <input class="open-sections" type="button" value="+" />
    <ul class="sections__list list-reset">
      <li class="sections__list--item item__about-company">
        <a class="link sections__list--item-link" href="#">O компании</a>
      </li>
      <li class="sections__list--item item__details">
        <a class="link sections__list--item-link" href="#">Комплектующие</a>
      </li>
      <li class="sections__list--item item__products">
        <a class="link sections__list--item-link" href="#">Продукты</a>
      </li>
      <li class="sections__list--item item__delivery">
        <a class="link sections__list--item-link" href="#">Доставка</a>
      </li>
      <li class="sections__list--item item__production">
        <a class="link sections__list--item-link link-production" href="#">Производство печатных плат</a>
      </li>
      <li class="sections__list--item item__contacts">
        <a class="link sections__list--item-link" href="#">Контакты</a>
      </li>
      <li class="sections__list--item item__repairs">
        <a class="link sections__list--item-link" href="#">Монтаж печатных плат</a>
      </li>
    </ul>
  </div>
  <!-- Contacts block -->
  <div class="page-footer__contacts">
    <input class="open-contacts" type="button" value="+" />
    <h3 class="title page-footer__contacts--heading">Наш офис</h3>
    <ul class="contacts__list list-reset">
      <li class="contacts__list--item">
        <a class="link contacts__list--link" href="#">г. Мытищи, Олимпийский проспект, д.10</a>
      </li>
      <li class="contacts__list--item">
        <a class="link contacts__list--link" href="#">+7 (495) 589-40-50</a>
      </li>
      <li class="contacts__list--item">
        <a class="link contacts__list--link" href="#">+7 (925) 003-87-67</a>
      </li>
      <li class="contacts__list--item">
        <a class="link contacts__list--link" href="#">+7 (926) 926-080-79</a>
      </li>
    </ul>
  </div>
</div>

我有两个列表，一开始它们应该被隐藏。当我单击它们旁边的（+）按钮6时，列表应平滑打开；如果我单击按钮（此刻现在应该看起来像（-）...

javascript html css
2个回答
0
投票

您并没有真正给我们一个可重复的例子。您的<button>标记无效，因为您没有为我们提供自定义元素的代码，因此我不得不将其更改为<input type="button" value="+"/>。

0
投票

我认为您正在尝试创建手风琴，因此一开始就需要隐藏所有ul。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.