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

好吧，我提供了一个片段示例，说明了我想要的内容，只是告诉我它是否按预期工作。

$(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”方法会切换元素的可见性，因此您无法正确检查。

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

2 个答案: