Jquery 仅根据屏幕大小删除类

我想在屏幕小于1339px时从div中删除.btn组，这样在较小的屏幕上布局就不会受到影响。我正在使用引导v3

我喜欢使用1340的导航栏布局的感觉。我希望它看起来像

我不太确定从哪里开始或如何开始。我已经看过其他线程的几个答案，但它们似乎不起作用

<header class="page-header">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.php">Mommy Info</a>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <div class="btn-group">
                            <a class="btn navbar-btn">Home</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="splash"> <a href="#">Home</a></li>
                                <li><a href="#">B</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </li> <!--home-->
                    <li>
                        <div class="btn-group">
                            <a class="btn navbar-btn">Preg</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="splash"> <a href="#">Preg</a></li>
                                <li><a href="#">ttc</a></li>
                                <li><a href="#">fd</a></li>
                                <li><a href="#">gp</a></li>
                                <li><a href="#">lad</a></li>
                            </ul>
                        </div>
                    </li> <!--preg-->
                    <li>
                        <div class="btn-group">
                            <a class="btn navbar-btn">aab</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">advice</a></li>
                                <li><a href="#">guidelines</a></li>
                                <li><a href="#">milestones</a></li>
                                <li><a href="#">ld</a></li>
                            </ul>
                        </div>
                    </li> <!--aab-->
                    <li>
                        <div class="btn-group">
                            <a class="btn navbar-btn">han</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">B</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </li><!--han -->
                    <li>
                        <div class="btn-group">
                            <a class="btn navbar-btn">MM</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">B</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </li> <!-- pm-->
                    <li>
                        <div class="btn-group">
                            <a class="btn navbar-btn">MM</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">B</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </li> <!-- mm-->
                    <li>
                        <div class="btn-group">
                            <a class="btn navbar-btn">S</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">HB</a></li>
                                <li><a href="#">DB</a></li>
                                <li><a href="#">CS</a></li>
                                <li><a href="#">BG</a></li>
                            </ul>
                        </div>
                    </li> <!--s-->
                    <li>
                        <div class="btn-group">
                            <a class="btn navbar-btn">R</a>
                            <a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">RGames</a></li>
                                <li><a href="#">Rgear</a></li>
                                <li><a href="#">Rlearn</a></li>
                            </ul>
                        </div>
                    </li> <!--r-->
                    <li>
                        <div class="btn-group">
                    <a href="#" class="btn navbar-btn">B</a>
                        </div>
                    </li> <!--b -->
                </ul>
            </div>
        </div>
    </div>
</header>

切换导航

答复:

$(document).ready(function(){
    if(window.innerWidth < 1340){
        $('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
        $('.btn').addClass('backup-btn').removeClass('btn');
        $('.mybtn').addClass('dropdown-toggle').attr("data-toggle", "dropdown");
        $('.myanchor').addClass('anchor');
    }
});

$(window).resize(function(){
    if(window.innerWidth < 1340){
        $('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
        $('.btn').addClass('backup-btn').removeClass('btn');
        $('.mybtn').addClass('dropdown-toggle').attr("data-toggle", "dropdown");
        $('.myanchor').addClass('anchor');
    }else{
        $('.backup-btn-group').addClass('btn-group').removeClass('backup-btn-group');
        $('.backup-btn').addClass('btn').removeClass('backup-btn');
        $('.mybtn').removeClass('dropdown-toggle').removeAttribute("data-toggle");
        $('.myanchor').removeClass('anchor');
    }
});

$（文档）.ready（函数（）{
如果（窗内宽度<1340）{
$（'.btn-group'）.addClass（'backup-btn-group'）.removeClass（'btn-group'）；
$（'.btn'）.addClass（'backup-btn'）.removeClass（'btn'）；
$（'.mybtn'）.addClass（'dropdown-toggle'）.attr（“数据切换”，“下拉”）；
$（'.myanchor'）.addClass（'anchor'）；
}
});
$（窗口）。调整大小（函数（）{
如果（窗内宽度<1340）{
$（'.btn-group'）.addClass（'backup-btn-group'）.removeClass（'btn-group'）；
$（'.btn'）.addClass（'backup-btn'）.removeClass（'btn'）；
$（'.mybtn'）.addClass（'dropdown-toggle'）.attr（“数据切换”，“下拉”）；
$（'.myanchor'）.addClass（'anchor'）；
}否则{
$（'.backup-btn-group'）.addClass（'btn-group'）.removeClass（'backup-btn-group'）；
$（'.backup-btn'）.addClass（'btn'）.removeClass（'backup-btn'）；
$（'.mybtn'）.removeClass（'dropdown-toggle'）.removeAttribute（“数据切换”）；
$（'.myanchor'）.removeClass（'anchor'）；
}
});

您可以使用jquery来实现这一点

$(document).ready(function(){
  if(window.innerWidth < 1340){
    $('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
  }
});

$(window).resize(function(){
  if(window.innerWidth < 1340){
    $('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
  }else{
    $('.backup-btn-group').addClass('btn-group').removeClass('backup-btn-group');
  }
});

$（文档）.ready（函数（）{
如果（窗内宽度<1340）{
$（'.btn-group'）.addClass（'backup-btn-group'）.removeClass（'btn-group'）；
}
});
$（窗口）。调整大小（函数（）{
如果（窗内宽度<1340）{
$（'.btn-group'）.addClass（'backup-btn-group'）.removeClass（'btn-group'）；
}否则{
$（'.backup-btn-group'）.addClass（'btn-group'）.removeClass（'backup-btn-group'）；
}
});

---

我让它添加了一个类“backup btn group”，因此如果窗口大于1340，它将替换原始类，但您可以将其保留在var中，您可以使用jquery执行此操作

$(document).ready(function(){
  if(window.innerWidth < 1340){
    $('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
  }
});

$(window).resize(function(){
  if(window.innerWidth < 1340){
    $('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
  }else{
    $('.backup-btn-group').addClass('btn-group').removeClass('backup-btn-group');
  }
});

$(window).on("load resize", function() {
if($(window).width < 1340){
 $('.btn-group').hide();
}
else{
 $('.btn-group').show();
}
});

$（文档）.ready（函数（）{
如果（窗内宽度<1340）{
$（'.btn-group'）.addClass（'backup-btn-group'）.removeClass（'btn-group'）；
}
});
$（窗口）。调整大小（函数（）{
如果（窗内宽度<1340）{
$（'.btn-group'）.addClass（'backup-btn-group'）.removeClass（'btn-group'）；
}否则{
$（'.backup-btn-group'）.addClass（'btn-group'）.removeClass（'backup-btn-group'）；
}
});

我让它添加了一个类“backup btn group”，因此如果窗口大于1340，它将替换原始类，但您可以将其保留在var

$（窗口）中{
$(window).on("load resize", function() {
if($(window).width < 1340){
 $('.btn-group').hide();
}
else{
 $('.btn-group').show();
}
});

如果（$（窗口）.宽度<1340）{
$（'.btn group'）.hide（）；
}
否则{
$（'.btn group'）.show（）；
}
});

您应该使用CSS隐藏宽度小于1340的.btn组窗口。因此它不会在加载时显示。

$（窗口）。在（“加载调整大小”，函数（）上）{
如果（$（窗口）.宽度<1340）{
$（'.btn group'）.hide（）；
}
否则{
$（'.btn group'）.show（）；
}
});

---

您应该使用CSS隐藏宽度小于1340的.btn组窗口。因此，它不会在加载时显示。

我应该在哪里添加它？如果您正在使用引导，并且您正在使用，您应该已经包括jQuery，这是引导正常工作所必需的。创建自定义J