删除类，然后重新添加

Remove class and then add back

本文关键字：添加 新添加 然后 删除      更新时间：2023-09-26

我在下面列出了一个标题导航，添加到li的类会创建一个图标。

向下滚动时，我希望能够

完全删除该类，而当滚动回页面顶部时，我希望能够分辨哪个类属于哪个项目并重新添加相同的类。

我想我可能需要将它们存储到变量中。 请记住，这些菜单项是动态的，如果被删除，它们可能会发生变化。

.HTML

<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
    <li id="menu-item-37" class="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
    <li id="menu-item-35" class="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
    <li id="menu-item-36" class="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
</ul>
<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
    <li id="menu-item-61" class="customicon-about"><a href="http://localhost:8888/about/">About</a></li>
    <li id="menu-item-62" class="customicon-support"><a href="http://localhost:8888/support/">Support</a></li>
    <li id="menu-item-63" class="customicon-why"><a href="http://localhost:8888/why/">Why?</a></li>
</ul>

jQuery

var nav = $(".nav");
var pos = nav.position();
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        nav.css({
            'position': 'fixed'
        }).addClass("sticky");
    } else {
        nav.css({
            'position': 'relative'
        }).removeClass("sticky");
    }
});

如果你看一下代码，id将是动态的，但类不是。

  1. 不要将 jquery .css 和 .addClass 结合起来，当你可以在类规则中完成这一切时。
  2. 你只需要 1 个类，.sticky将位置：固定; 和 top： 0; 应用于<ul>元素。

使用.toggleClass添加.sticky，无需为position: relative;添加任何css或类，或者当他们向上滚动页面时，只需删除类.sticky 

$(window).scroll(function() {
  var pos = $(".nav").position();
  $(".nav").toggleClass('sticky', $(window).scrollTop() > pos.top);
});

并将 CSS 用于 .sticky 类：

.sticky {
    position: fixed;
    top: 0;
}

因此，使用这种方法，它只会在页面向下滚动时添加sticky类，当他们向上滚动时，它将自动删除该类。

目前尚不清楚$(".nav")在上面的jQuery代码中代表什么。 如果您指的是 HTML 5 <nav> 元素，那么上面的代码应该可以工作，如果您从它说 $(".nav") 的任何地方删除.，那么它会变得$("nav")

您可以使用 jQuery 的数据函数在任何元素中存储任意数据

.HTML

    <ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
        <li id="menu-item-37" class="customicon-shop" data-icon="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
        <li id="menu-item-35" class="customicon-contact" data-icon="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
        <li id="menu-item-36" class="customicon-apps" data-icon="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
    </ul>

JS，当您滚动回顶部时

  jQuery('#menu-left-main-nav li, #menu-right-main-nav li').each(function() {
      var originalclass = jQuery(this).data('icon');
      jQuery(this).addClass(originalclass);
  });

您可以将自定义数据属性添加到将包含相应类名的 li 标记，然后按如下所示添加和删除它。

.HTML 

<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
    <li id="menu-item-37" data-icon-class="customicon-shop"><a href="http://localhost:8888/shop/">Shop</a></li>
    <li id="menu-item-35" data-icon-class="customicon-contact"><a href="http://localhost:8888/account/">Account</a></li>
    <li id="menu-item-36" data-icon-class="customicon-apps"><a href="http://localhost:8888/apps-entertainment/">Apps &amp; Entertainment</a></li>
</ul>
<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
    <li id="menu-item-61" data-icon-class="customicon-about"><a href="http://localhost:8888/about/">About</a></li>
    <li id="menu-item-62" data-icon-class="customicon-support"><a href="http://localhost:8888/support/">Support</a></li>
    <li id="menu-item-63" data-icon-class="customicon-why"><a href="http://localhost:8888/why/">Why?</a></li>
</ul>

.JS

var $listItems = $('.nav-bar li'),
    itemIconClass = $listItem.attr('data-icon-class');
// add class
$listItem.addClass(itemIconClass);
// remove class
$listItem.removeClass(itemIconClass);
相关文章：