Question

我正在为WordPress网站开发一个子主题。该站点的响应式导航在480px断点之下无法正常运行。这个断点上方的导航由Superfish jQuery插件处理，但这在电话视图中提供了破碎的结果。我已经删除了480px以下的Superfish插件的类，并滚动了我自己的菜单。

菜单最多包含三个级别的子菜单项。一切都隐藏在电话视图中，汉堡图标的ID为＆＃34;触发＆＃34;打开菜单。包含子菜单项作为后代的每个菜单项都有一个附加到末尾的指示符（＆＃34;开关＆＃34;）。用于切换打开子菜单的点击事件附加到＆＃34;开关＆＃34;类。

javascript如下：

//Removed Superfish classes so new mobile styles can be implemented
if($(window).width() < 480) {
    $('#menu-main-navigation').removeClass('sf-menu sf-js-enabled main-nav');
    $('.sf-with-ul').removeClass('sf-with-ul');
    $('.sf-sub-indicator').remove();
};

//Toggles top-level menu items on click
$('#trigger p, #trigger img').click(function(){
    $('#menu-main-navigation').slideToggle('fast');
});

//If a top-level menu items contains a ul as a descendent, attach an indicator
$('#menu-main-navigation li').has('ul').append('<span class="switch"></span>');

//Add click event to indicator that opens the descendent ul
$('.switch').click(function(){
    $(this).siblings('ul').slideToggle('fast'); 
});

我遇到的这个问题是附加＆＃34;开关＆＃34;元件。元素正确附加到包含子菜单项的每个顶级菜单项。但是，当打开顶级项目时，生成的子菜单项始终中的第一项具有＆＃34;开关＆＃34;无论是否有子菜单项，都会附加元素。我已经从最初的jQuery插件中删除了所有类以防止冲突，所以问题必须在我的代码中，但我无法发现它。感谢您的帮助。

编辑：根据莎拉的建议，这是一个标记样本。

<ul id="menu-main-navigation">
   <li><a href="#">Home</a></li>
   <li><a href="#">Item/a>
      <ul>
         <li><a href="#">SubItem</a></li>
         <li><a href="#">SubItem</a></li>
      </ul>
      <span class="switch"></span>
   </li>
   <li><a href="#">Another Item</a>
      <ul>
        <li><a href="#">SubItem</a></li>
        <li><a href="#">SubItem</a></li>
      </ul>
      <span class="switch"></span>
   </li>
</ul>

当然，每个列表项中都会有所有WordPress的额外课程......但这是所发生的事情的要点。

WordPress儿童主题中的jQuery响应式导航

0 个答案: