Question

我有4个无序列表。他们每个人都有很多列表项（li）。我想要当我单击一个列表标题时，显示所有列表项，同时关闭所有其他无序列表项。

我做了一个无序列表，其中有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

如何从一组列表中向下滑动一个列表，并一键关闭其他列表？

1 个答案: