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

我在一行中有多个复选框。单击按钮时，会显示一个div（#locale_容器），并翻转一个小箭头（通过添加旋转的类）

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

i、 e 如果选中复选框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

我的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>

---

好的，我提供了一个片段示例，其中包含我所了解的您想要的内容，请告诉我它是否如预期的那样工作

$（文档）.on（'change'，'inner'，函数（e）
{
//获取选中的复选框数。
变量计数器=$（'input[type=“checkbox”]：checked'）。长度；
console.log（“Checkboxs checked number:”+计数器）；
e、 预防默认值（）；
如果（计数器>0&&！$（“#区域设置_容器”）。为（“：可见”）
{
$（“#locale_container”）。向下滑动（“中”）；
$（“#区域设置_箭头”）.addClass（“翻转”）；
}
else if（counter以下是一个有效的版本：


HTML:

问题是“slidedown”方法会切换元素的可见性，因此无法正确检查。
如何隐藏/显示div？如果使用“不透明度”，则可以检查其值是0还是1，如果设置为“显示：无”你可以检查它是否已设置，等等。我正在使用display:none乍一看你的代码应该可以工作，你能提供一个工作代码笔/小提琴吗？我会做小提琴！给我几分钟-谢谢！你似乎有一些语法错误，1:an
id
必须是唯一的才能使页面有效（X）HTML，2：您有一个结束
而没有开始
标记，3：您的
else
的结束
}
后面有一个不必要的分号。另外：请发布您的“”在你的问题中的代码，JS Fiddle演示是一种奖励，但它并不能取代你在问题中的代码。太棒了！非常有效！谢谢！好的-理解！谢谢我有一个演示（）与你声称的“[change]事件在[Checkbox]上不起作用”不一致你说得对！我只是误读了jQueryAPI引用！它可以工作，只是立即启动了。
#locale_container {display:none}

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

#locale_arrow {height: 40px}

 <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>

$(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")
    });
});