如何防止我的课程从 mmenu 插件中删除？

Posted 2023-05-08

【中文标题】如何防止我的课程从 mmenu 插件中删除？

【英文标题】：How can I keep my classes from being removed from mmenu Plugin?

【发布时间】：2019-01-02 23:16:08

【问题描述】：

我目前正在使用 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>

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

【参考方案1】：

通过一些测试，我发现该插件会删除所有附加到任何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

【参考方案2】：

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

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

【参考方案3】：

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

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