如何在shopify页脚菜单中一次只打开一个下拉菜单?

Question

我的客户希望他的Shopify网站一次只打开一个下拉菜单，当他点击另一个下拉菜单时，另一个应该关闭。如何在Shopify中实现?

Answer 1

进入主题。液体和打开页脚部分和粘贴这些页脚菜单代码

<nav>
<ul class="my-nav">
{% for link in linklists[section.settings.footer_link_list].links %}
{% if link.links != blank %}
<li>
<details class="dropdown">
<summary>{{ link.title }}</summary>
<ul>
{% for child_link in link.links %}  
<li><a href= "{{ child_link.url }}">{{ child_link.title }}</a>
</li>
{% endfor %}
</ul>
</details>
</li>
{% else %}
<li class="site-nav__item">
<a 
mega="{{ link.title | escape }}"
href="{{ link.url }}"
class="site-nav__link nav-link"
data-meganav-type="child">
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
<script>
var nav = document.querySelector('.my-nav');
nav.addEventListener('toggle', function (event) {

// Only run if the dropdown is open
if (!event.target.open) return;
// Get all other open dropdowns and close them
var dropdowns = nav.querySelectorAll('.dropdown[open]');
Array.prototype.forEach.call(dropdowns, function (dropdown) {
if (dropdown === event.target) return;
dropdown.removeAttribute('open');
});
}, true);
</script>