Question

我目前正在使用mmenu jquery插件。 http://mmenu.frebsite.nl/documentation/core/off-canvas.html

当mmenu插件被触发时，是否可以保留在导航项中使用的类名？它们已删除，并且我有需要设置样式的菜单项的标题。

供参考：

<ul>
   <li><a class="dropdown-item nav-heading" href="#">Coffee Services</a></li>
   <li><a class="dropdown-item" href="#">Quality Equipment</a></li>
   <li><a class="dropdown-item" href="#">Our Coffees</a></li>
</ul>

成为：

<ul class="mm-listview">
  <li class="mm-listitem"><a href="#">Coffee Services</a></li>
  <li class="mm-listitem"><a href="#">Quality Equipment</a></li>
  <li class="mm-listitem"><a href="#">Our Coffees</a></li>
</ul>

我需要保留“导航标题”课程！

Answer 1

我不确定您面临什么情况。但是，如果发现此问题，我将使用 Mutation Observer （Mutation Observer）来检测HTML元素的更改。当您检测到元素的任何变化（类属性发生变化）时，可以在类属性中插入“ nav-heading”。

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

如果插件本身删除了您的类，则与此无关，但可以动态添加所需的类。使用此代码段可能会对您有所帮助。

$(document).ready(function(){
    $('.mm-listitem:eq(0)').addClass('nav-heading');
    $('.mm-listitem').on('click', function(){
        $('.mm-listview > *').removeClass('nav-heading');
        $(this).addClass('nav-heading');
    })
});

Answer 3

通过一些测试，我发现该插件删除了所有附加到任何div，a，li或span上的类。如果将类添加到li标记内的任何其他元素，它将被复制过来。因此，如果要复制类，可以使用i元素。例如：

<li>
    <a class="dropdown-item" href="#">
        <i class="nav-heading">
            Coffee Services
        </i>
    </a>
</li>

这将被复制为：

<li class="mm-listitem">
    <a href="#" class="mm-listitem__text">
        <i class="nav-heading">
            Coffee Services
        </i>
    </a>
</li>

然后在CSS计数器中添加i标签的样式，并添加自己的样式：

.nav-heading {
    font-style: initial;

    // Add your styling
}

如何避免将我的课程从mmenu插件中删除？

3 个答案: