主页 / 问题 / 1091692
Accepted
Рома
Asked:2020-03-07 04:48:14 +0000 UTC2020-03-07 04:48:14 +0000 UTC

列表打开时显示隐藏按钮

  • 772

有许多列表最多显示 7 行。每个列表后都有一个“更多”按钮，单击时，整个剩余列表将打开到现有列表（other_li）。这是代码：

<div class="work-title-category-item">
    <h2>Тексты</h2>
        <ul>
            <li><a href="work-create-2.php" title="">Сценарии</a></li>
            <li><a href="work-create-2.php" title="">Резюме</a></li>
            <li><a href="work-create-2.php" title="">Статьи</a></li>
            <li><a href="work-create-2.php" title="">Редактирование</a></li>
            <li><a href="work-create-2.php" title="">Контент менеджер</a></li>
            <li><a href="work-create-2.php" title="">Стихи, сказки, эссе</a></li>
            <li><a href="work-create-2.php" title="">Помощь, мануал</a></li>
            <span class="other_li">
                <li><a href="work-create-2.php" title="">Создание субтитров</a></li>
                <li><a href="work-create-2.php" title="">Бизнес-тексты</a></li>
            </span>
            <li class="local-cat local-cat-show" id="more">Ещё..</li>
            <li class="local-cat local-cat-sh" id="shadow">Скрыть</li>
        </ul>
    </div>
// Активация скрытого меню при нажатии "Ещё"
let prev = null;
document.body.addEventListener("click", (e) => {
  let el = e.target;
  if (!el.classList.contains("local-cat")) return false;
  let other = el.parentElement.querySelector(".other_li");
  if (prev === other) {
    other.style.display = "none";
    prev = null;
    return false;
  }
  if (prev) prev.style.display = "none";
  other.style.display = "block";
  prev = el.parentElement.querySelector(".other_li");
});

也许一切都不是很好，但到目前为止我有一个代码，当列表打开时“更多”按钮消失，并出现“隐藏”，但问题是代码适用于所有列表，但点击只有一个。我看到了唯一的出路 - 为每个列表规定“更多”和“隐藏”其他类，并不断复制新类的代码。坏主意，这就是为什么我来这里寻求更正常的解决方案。顺便说一句，这是代码：

// Показ кнопки "скрыть" при раскрытом меню
$('.local-cat-show').click(function() {
  $(this).css("display","none");
  $('.local-cat-sh').css("display","initial");
});
$('.local-cat-sh').click(function() {
  $(this).css("display","none");
  $('.local-cat-show').css("display","initial");
});
javascript

1 个回答

  1. Best Answer
    $('.local-cat-show').click(function() {
  $(this).css("display","none");
  $(this).closest("ul").find('.local-cat-sh').css("display","initial");
});
$('.local-cat-sh').click(function() {
  $(this).css("display","none");
  $(this).closest("ul").find('.local-cat-show').css("display","initial");
});
    • 2

相关问题