jQuery - 在特定窗口宽度上使用addClass,在同一元素上使用toggleClass

时间:2017-02-27 12:08:09

标签: jquery

我有一个on resize add class jQuery函数,它帮助我在某个窗口大小上显示一个元素:

<div class="v-menu"></div>
<div id="menu">
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
</div>

(function($) {
        var $window = $(window),
            $html = $('#menu');
        function resize() {
            if ($window.width() < 612) {
                return $html.addClass('close');
            }
            else{
            $html.removeClass('close');
            $html.removeClass('open');
            $('*[class=""]').removeAttr('class');
            }
        }
        $window
            .resize(resize)
            .trigger('resize');
    })(jQuery);

我可以用另一个功能切换它:

$(".v-menu").click(function(){
$("#menu").toggleClass("open");
$("#menu").toggleClass("close");
});

问题是如果我将元素切换为打开然后调整窗口大小jQuery继续将close类添加到元素中:

<div id="menu" class="open close">
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
</div>

我该如何解决?

1 个答案:

答案 0 :(得分:1)

根据您的评论

  

我不希望在添加公开课时添加密切的课程。

https://api.jquery.com/hasclass/

 if ($window.width() < 612){
         if(!$html.hasClass('open')) {
                  return $html.addClass('close');
         }
 }