javascript - 如何从一组列表中向下滑动一个列表并单击关闭其他列表？

Question

我有 4 个无序列表。他们每个人都有很多列表项(li's)。我希望当我单击一个列表标题时显示所有列表项，同时关闭所有其他未排序列表的元素。

我制作了一个无序列表，其中包含 4 个列表项。每个列表都有另一个无序列表，每个列表都有许多列表项(嵌套列表)。每个列表都有一个类别，用于城市、省份和其他链接。一旦我点击“例如在第一个列表标题上”(同一省的城市)，就会显示下拉列表。在同一时间点击，所有其他列表的元素都关闭“隐藏”。我已经完成了以下代码:

<ul class="menu city_list">
                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category">cities in the same province </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>




                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category">country cities </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>



                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category">provinces </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>


                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category"> some other city link </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>

                    </ul>


    <script>
    var accHD = document.getElementById('accordionItemHeading');
    var content = document.getElementsByClassName('sss');

    for (i = 0; i < accHD.length; i++) {
    accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
    var itemClass = this.className;
    hide_content = getElementsByClassName('sss sss_close')
    if (hide_contents == 'sss sss_close') {
        hide_contents.className = 'sss sss_open';
    }
    else{
        content.className = 'sss sss_close'
    }
    }
</script>

这是CSS代码:

.sss_close{
 height:0px;
 transition:height 1s ease-out;
 -webkit-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
 float:left;
 display:block;
 }


 .sss_open{
 -webkit-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
 -webkit-transform-origin: top;
 -o-transform-origin: top;
 -ms-transform-origin: top;
 transform-origin: top;

 -webkit-transition: -webkit-transform 0.6s ease-out;
 -o-transition: -o-transform 0.6s ease;
 -ms-transition: -ms-transform 0.6s ease;
 transition: transform 0.6s ease;
 box-sizing: border-box;
 }

我对使用纯 javascript 代码的解决方案感兴趣

Answer 1

我不确定我是否理解了您希望它正确执行的操作。您是否要单击标题以打开单击标题下的所有子列表并关闭所有不在单击标题下的子列表？如果是这样，您可以通过以下方式做到这一点:

const headingLinks = document.querySelectorAll('h5.category');
const contents = document.querySelectorAll('.sss');

for (let headingLink of headingLinks) {
  headingLink.addEventListener('click', openItem);  
}

function openItem() {
  const wasAlreadyOpen = this.classList.contains('isOpen');
  for (let headerLink of headingLinks) {
    headerLink.classList.remove('isOpen');
  }
  if (wasAlreadyOpen) {
    this.classList.remove('isOpen');
  } else {
    this.classList.add('isOpen');
  }

  for (let content of contents) {  
    const shouldBeOpen = !wasAlreadyOpen && this.parentNode.parentNode.contains(content);
    if (shouldBeOpen) {
      content.classList.remove('sss_close');
      content.classList.add('sss_open');
    } else {
      content.classList.remove('sss_open');
      content.classList.add('sss_close');
    }
  }
}

您应该能够让其他一切保持不变。只需用上面的代码替换您的 javascript。

您可能还需要替换所有标题链接 <a href="">与 <a href="javascript:void(0);">或删除 a完全标记并留下 h5从内部标记。

这是一个工作示例 https://jsbin.com/saluzezesu/edit?html,js,output