切换菜单但如果选中复选框则保留空间

Question

我使用jquery

跟随切换菜单

$(document).ready(function(){
  $(".toggle").click(function(){ 
    $(".menu").slideToggle(700);
  });
});

.menu {
  background: #1abc9c;
  display: none;
  width: 100%;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 15px 0;
  text-transform: uppercase;
}

.menu ul li:hover { background: #16a085; }
 
.left{
    float:left;
    padding:10px;
}

.clear {
    clear:both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="left">
    <li><input type="checkbox" /> A</li>
    <li><input type="checkbox" /> B</li>
    <li><input type="checkbox" /> C</li>
    <li><input type="checkbox" /> D</li>
  </ul>
  <ul class="left">
    <li><input type="checkbox" /> 1</li>
    <li><input type="checkbox" /> 2</li>
    <li><input type="checkbox" /> 3</li>
    <li><input type="checkbox" /> 4</li>
  </ul>
  <ul class="left">
    <li><input type="checkbox" /> a</li>
    <li><input type="checkbox" /> b</li>
    <li><input type="checkbox" /> c</li>
    <li><input type="checkbox" /> d</li>
  </ul>
    
  <ul class="left">
    <li><input type="checkbox" /> #</li>
    <li><input type="checkbox" /> +</li>
    <li><input type="checkbox" /> %</li>
    <li><input type="checkbox" /> =</li>
  </ul>

    <br class="clear" />
</div>

<a href="#" class="toggle">toggle</a>

用户现在打开菜单并单击复选框。如果他再次关闭菜单，菜单不应完全消失，但点击的复选框应该是可见的。

编辑： 请看下面的图片。在检查一个框并再次关闭菜单后显示想要的结果。

绿色菜单现在不再完全隐藏，因为chechbox保持可见。

Answer 1

这应该滑动单个项目，如果这是你想要的：

$(document).ready(function(){
  $(".toggle").click(function(){ 
    $(".menu input:checkbox:not(:checked)").parent("li").slideToggle(700);
  });
});

Answer 2

嗨，我想这可能是你想要的。这是jsfiddle。您可以随意使用它来根据自己的喜好定制它。如果这不对，我会再试一次，但对你来说应该是一个好的开始。以下是我使用的js以使其工作，但绝对不是完成任务的最佳方式。

    $( "li" ).each(function() {
           var x = $(this).find( "input" );
            if(x.prop('checked')==true){
                x.closest('li').css("visibility","visible");
            }else{
            x.closest('li').css("visibility","hidden");
            };
    });

Answer 3

哦，对不起;你还必须将css显示：无规则移动到 li 元素的规则而不是整个菜单，如下所示：

$(document).ready(function(){
  $(".toggle").click(function(){ 
    $(".menu input:checkbox:not(:checked)").parent("li").slideToggle(700);
return false;
  });
});

.menu {
  background: #1abc9c;
  width: 100%;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 15px 0;
  text-transform: uppercase;
   display: none;
   }

.menu ul li:hover { background: #16a085; }
 
.left{
    float:left;
    padding:10px;
}

.clear {
    clear:both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="left">
    <li><input type="checkbox" /> A</li>
    <li><input type="checkbox" /> B</li>
    <li><input type="checkbox" /> C</li>
    <li><input type="checkbox" /> D</li>
  </ul>
  <ul class="left">
    <li><input type="checkbox" /> 1</li>
    <li><input type="checkbox" /> 2</li>
    <li><input type="checkbox" /> 3</li>
    <li><input type="checkbox" /> 4</li>
  </ul>
  <ul class="left">
    <li><input type="checkbox" /> a</li>
    <li><input type="checkbox" /> b</li>
    <li><input type="checkbox" /> c</li>
    <li><input type="checkbox" /> d</li>
  </ul>
    
  <ul class="left">
    <li><input type="checkbox" /> #</li>
    <li><input type="checkbox" /> +</li>
    <li><input type="checkbox" /> %</li>
    <li><input type="checkbox" /> =</li>
  </ul>

    <br class="clear" />
</div>

<a href="#" class="toggle">toggle</a>