Question

我有一个在桌面视图（＆gt; 980px）上打开的slideToggle菜单，最初在移动视图中展开。

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

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

如果＃refinement-menu具有类.mobile_refine AND .list-group-item-holder打开然后添加类'mobileopen' 最近的.list-group-item.subfilter_ttl

如果＃refinement-menu具有类.mobile_refine AND .list-group-item-holder是CLOSED然后添加类'mobileclosed' 最近的.list-group-item.subfilter_ttl

如果＃refinement-menu具有类.desktop_refine AND .list-group-item-holder打开然后将类'desktopopen'添加到最近的.list-group-item.subfilter_ttl

如果＃refinement-menu具有类.desktop_refine AND .list-group-item-holder是CLOSED然后将类'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'

有什么想法吗？

Answer 1

您的$运营商后，您的if / else语句缺少&&。

if（$（＆＃39;＃refinement-menu＆＃39;）。hasClass（＆＃39; desktop_refine＆＃39;）＆amp;＆amp;（＆＃39; .list-group-item-holder＆＃39; ;）。（＆＃39;：可见＆＃39;））{

jQuery - if else add class - 多个条件

1 个答案: