如何解决如何让我的菜单项链接触发子菜单,就像它旁边的触发图标一样?
我希望菜单链接(“音频”)触发子菜单,就像它旁边的箭头图标(>)一样: https://i.stack.imgur.com/2WZZo.png
代码如下:
<li class="level_1__item {% if link_count > 0 %}with_ul{% endif %}">
<a class="level_1__link" href="{{ link.url }}">{{ link.title }}</a>
{% if link_count > 0 %}
<i class="level_1__trigger menu_trigger fa fa-angle-right" data-submenu="submenu_{{ section.id }}-{{ forloop.index }}"></i>
<ul class="level_1_2 {% if link_count > 3 %}large_child{% endif %} droped_linklist" id="submenu_{{ section.id }}-{{ forloop.index }}">
{% for childlink in linklists[child_list_handle].links %}
{%- assign child_list_2_handle = childlink.title | handleize -%}
{%- assign link_count = 0 -%}
{% for childlink in linklists[child_list_2_handle].links %}
{%- assign link_count = link_count | plus: 1 -%}
{% endfor %}
<li class="level_1_2_item {% if link_count > 2 %}with_ul{% endif %}">
<a class="level_1_2_link" href="{{ childlink.url }}">{{ childlink.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% javascript %}
jQuery(document).ready(function($) {
$(window).on('load resize',function() {
megamenuToggle();
});
$('#vertical_menu_toggle').click(function(e){
e.preventDefault();
$('#opened').click();
if ($(this).parent().hasClass('active')){
$(this).parent().removeClass('active');
} else {
$(this).parent().toggleClass('active');
}
});
$('.vertical_menu_item .menu_trigger').each(function(i) {
var targetMenu = '#' + $(this).data('submenu');
$(this).on('click',function(e){
if ($(this).hasClass('active')){
$(targetMenu).hide();
$(this).removeClass('active');
} else {
$('.vertical_menu_item .menu_trigger').each(function(j) {
var targetMenu_close = '#' + $(this).data('submenu');
if ($(this).hasClass('active')){
$(targetMenu_close).hide();
$(this).removeClass('active');
};
});
$(targetMenu).show();
$(this).addClass('active');
};
});
});
});
{% endjavascript %}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。