检查 div 是否可见或隐藏并切换类

Question

我连续有多个复选框。单击按钮时，它会显示一个 div (#locale_container)，并且会翻转一个小箭头（通过添加旋转的类）。

但是我不希望每次选中复选框时箭头都会翻转，只有当 div 可见或隐藏时。

即 如果复选框 1 被选中然后旋转（div 被隐藏然后可见），那么如果未选中则再次旋转（div 可见然后隐藏）。

如果选中复选框 2 和复选框 3，则旋转，但如果未选中复选框 3 且复选框 2 仍选中，则不旋转。

这是我迄今为止设法构建的，但似乎无法让它工作！

如何让它在每次选中该框时停止旋转 - 检查 div 何时可见或隐藏！

$(document).on('change', '#est', function (e)
{
    e.preventDefault();
    $( "#locale_container" ).slideDown( "Medium");

    if (!$('#locale_container').is(':visible'))
    {
        console.log("hidden");
        $("#locale_arrow").toggleClass('flip');
    }
    else
    {
        console.log("visible"); 
    }

    console.log("Check")
});

编辑：JSFIDDLE https://jsfiddle.net/10yf47an/2/

我的 HTML

  <div class="inner" id="est">
  <label>
  <input type="checkbox"><span>Club</span></label>
  </div>
  <div class="inner" id="est">
  <label>
  <input type="checkbox"><span>Pub</span></label>
  </div>



<img id="locale_arrow" src="https://image.flaticon.com/icons/svg/7/7645.svg" >
      <div id="locale_container">
   DEMO</div>

我的 CSS

#locale_container {display:none}

.flip {transform: rotate(-180deg);}

#locale_arrow {height: 40px}

Answer 1

好的，我提供了一个 sn-p 示例，其中包含我无法理解的内容，请告诉我它是否按预期工作。

$(document).on('change', '.inner', function (e)
{
    // Get number of checkboxes checked.

    var counter = $('input[type="checkbox"]:checked').length;
    console.log("Checkboxs checked number: " + counter);
    
    e.preventDefault();
    
    if (counter > 0 && !$('#locale_container').is(':visible'))
    {
        $("#locale_container").slideDown("Medium");
        $("#locale_arrow").addClass("flip");
    }
    else if (counter <= 0)
    {
        $("#locale_container").slideUp("Medium");
        $("#locale_arrow").removeClass("flip");
    }
});

#locale_container {display:none}

.flip {
  transform: rotate(-180deg);
}

#locale_arrow {height: 40px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="inner">
    <label>
        <input type="checkbox"><span>Club</span>
    </label>
</div>
<div class="inner">
    <label>
        <input type="checkbox"><span>Pub</span>
    </label>
</div>
  
<img id="locale_arrow" src="https://image.flaticon.com/icons/svg/7/7645.svg" >

<div id="locale_container">DEMO</div>

Answer 2

这是一个有效的版本：

JSFiddle

HTML：

 <div class="inner" id="est">
 <label>
   <input class="est" type="checkbox"><span>Club</span></label>
   </div>
   <div class="inner">
   <label>
   <input  class="est" type="checkbox"><span>Pub</span></label>
   </div>

 <img id="locale_arrow" src="https://image.flaticon.com/icons/svg/7/7645.svg" ></div>
       <div id="locale_container">DEMO</div>

JS：

$(document).ready(function() {
    $('.est').on('click', function (e) {

        if (!$('#locale_container').is(':visible')) {
        $("#locale_arrow").toggleClass('flip');
      $( "#locale_container" ).slideDown( "Medium");
        console.log("hidden");
        } else {
        console.log("visible"); 
    }
     console.log("Check")
    });
});

问题在于“slidedown”方法切换了元素的可见性，因此您无法正确检查。