jQuery - if else 添加类 - 多个条件答案

【问题标题】：jQuery - if else add Class - multiple conditionsjQuery - if else 添加类 - 多个条件
【发布时间】：2015-06-17 19:25:48
【问题描述】：

我有一个在桌面视图 (>980px) 上打开的 slideToggle 菜单，最初在移动视图上折叠。

我添加了一些 jQuery，当页面在浏览器中加载或调整大小时，它添加了一个 'mobile_refine' 或 'desktop_refine' 类以依赖于屏幕大小。

我想根据导航是否具有上述类之一以及相关子菜单是否打开，向子菜单标题添加类。例如我的条件是：

如果#refinement-menu 有类 .mobile_refine AND .list-group-item-holder 是 OPEN 然后添加类 'mobileopen' 到最近的 .list-group-item.subfilter_ttl

如果#refinement-menu 有类 .mobile_refine AND .list-group-item-holder 已关闭，然后将类“mobileclosed”添加到最近的 .list-group-item.subfilter_ttl

如果#refinement-menu 有类 .desktop_refine AND .list-group-item-holder 是 OPEN 然后添加类 'desktopopen' 到最近的 .list-group-item.subfilter_ttl

如果#refinement-menu 有类 .desktop_refine AND .list-group-item-holder 已关闭，然后将类“desktopclosed”添加到最近的 .list-group-item.subfilter_ttl

我尝试使用 if/else 语句，但似乎无法正常工作：

$(function() {
    // This will fire when document is ready:
    $(window).resize(function() {
        // This will fire each time the window is resized:
        if ($ ('#refinement-menu').hasClass('desktop_refine') && ('.list-group-item-holder').is(':visible') ){
            // if larger or equal
            $('.subfilter_ttl').addClass('mobile_open');
        } else {
            // if smaller
            $('.subfilter_ttl').removeClass('mobile_open');
        }
    }).resize();
});

页面的 HTML/CSS 是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
<link href="http://swimmingcover.co.uk/refine/css/bootstrap.css" rel="stylesheet">
<link href="http://swimmingcover.co.uk/refine/css/test.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div id="main_content" class="container-fluid">
        <div id="main_content_container">

            <div class="row">       
                <aside id="sidebar_lft" class="col-md-12 col-lg-3">
                    <div id="refinement_menu_holder">
                        <header id="refinement_menu_hdr">
                            <span class="filter_ttl large_screen">Refine by...</span>
                            <span class="filter_ttl small_screen">Browse category...</span>
                        </header>
                        <nav class="side-menu subcategory-menu" id="refinement-menu">
                            <div class="list-group">
                              <span class="list-group-item subfilter_ttl">Item title 1</span>
                              <span class="list-group-item-holder">
                                  <a href="#" class="list-group-item">Item 1 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 2 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 3 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 4 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 5 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 6 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 7 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 8 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 9 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 10 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 11 <span class="badge">(14)</span></a>
                                </span>      
                            </div>             

                            <div class="list-group">
                              <span class="list-group-item subfilter_ttl">Item title 2</span>
                              <span class="list-group-item-holder">
                                  <a href="#" class="list-group-item">Item 1 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 2 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 3 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 4 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 5 <span class="badge">(14)</span></a>
                                  <a href="#" class="list-group-item">Item 6 <span class="badge">(14)</span></a>
                                </span>      
                            </div>             
                            </div>             
                        </nav>
                    </div>
                </aside>    

            </div>        
        </div>
    </div>    

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://swimmingcover.co.uk/refine/js/bootstrap.min.js"></script>
<script src="http://swimmingcover.co.uk/refine/js/test.js"></script>

</body>
</html>

这是代码的 jsFiddle： http://jsfiddle.net/qftg03u0/

基本上，在桌面上，如果子菜单打开，则相关字幕应具有“desktopopen”类，如果子菜单关闭，则相关字幕应具有“desktopclosed”类

对于移动设备，如果子菜单打开，则相关字幕应具有“mobileopen”类，如果子菜单关闭，则相关字幕应具有“mobileclosed”类

有什么想法吗？

【问题讨论】：

标签： jquery if-statement toggle conditional-statements addclass

【解决方案1】：

您的 if/else 语句在您的 && 运算符后面缺少 $。

if ($ ('#refinement-menu').hasClass('desktop_refine') && ('.list-group-item-holder').is(':visible') ){

【讨论】：