如果一两个盒子打开/关闭,打开/关闭其余的(如果全部打开,关闭所有)

Posted

技术标签:

【中文标题】如果一两个盒子打开/关闭,打开/关闭其余的(如果全部打开,关闭所有)【英文标题】:If one or two boxes are open / closed, open / close the remainders (if all are open, close all) 【发布时间】:2016-01-22 19:24:19 【问题描述】:

这个很棘手!我在这上面花了好几个小时,在 *** 上找不到类似的东西,可能是因为我不确定要搜索什么。

问题:

    在一个容器中,我有 3 个盒子,每个盒子都有一个打开/关闭切换按钮 - 可以单独切换它们 - 效果很好。

    我在容器外有一个 Open-Close All 按钮,它应该能够打开剩余的框 (if 1 or 2 are already open) 或者如果所有/或没有打开,它应该打开/关闭它们。

我的代码几乎可以完成我需要的所有工作(if 1 or 2 boxes are open and you click Open-Close All, the remainder opens),如果所有框都已关闭,则打开-关闭会立即将它们全部打开。

唯一不起作用的是,如果所有框都打开了,我希望能够通过单击打开-关闭所有来一次关闭它们。

http://codepen.io/StrengthandFreedom/pen/ZbrvOO

$('.small-box-button').on('click', function()
  event.preventDefault();
  $(this).next('.small-box').toggleClass('is-visible');

);

// Open / Close all / remainders
$('.open-close-all-button').on('click', function()
  event.preventDefault();

  if ($('.small-box').is(':visible')) 
 // then open the small boxes that are not open yet (the remainders) 
      $('.small-box').siblings().addClass('is-visible');
   //  $(this).next('.small-box').toggleClass('is-visible');

  //not sure what to do here... 
 else ($('.small-box').not(':visible')) 
       $('.small-box').siblings().addClass('is-visible');
);

我认为我需要使用更多 if else 条件并检查值 (like if isVisible >= 1 || 2 ) 但不知道如何编写它。 我有一种感觉,这可以写得更简单。

非常感谢一些指导,我已尽力使示例尽可能易于查看。

谢谢! :-)

【问题讨论】:

是的,应该是可行的...... 您的代码笔上没有“打开/关闭”按钮? 【参考方案1】:

我认为您的解决方案非常简单。基本上,您要做的就是检查当用户单击框外的主按钮时显示的项目数。看看下面:

// 打开/关闭所有框 $('.open-close-all-button').on('click', function() event.preventDefault();

var numOfItems = $('.is-visible').length;

if(numOfItems > 1) //Add the case you need
  //Remove all the .is-visible
else
  //Add to all the boxes .is-visible 

);

另外我建议你封装你的代码:

$(document).ready(function()
  // Toggle individual boxes when clicking on buttons inside container
  $('.small-box-button').on('click', function()
    event.preventDefault();
    $(this).next('.small-box').toggleClass('is-visible');

  );
  // Open/close all boxes 
  $('.open-close-all-button').on('click', function()
    event.preventDefault();

    var numOfItems = $('.is-visible').length;

    if(numOfItems > 1) //Add the case you need
      //Remove all the .is-visible
    else
      //Add to all the boxes .is-visible 
    
  );
);

【讨论】:

这也很完美,代码看起来与 Milind Anantwar 的回答 codepen.io/anon/pen/KdQoVG 完全不同——请问您为什么使用 var?它是否使代码运行得更快?我真的对这些东西很好奇,而且我认为得到两个都可以完美运行的不同答案很有趣。谢谢! :-) 您可以随意使用您想要的。很高兴为您提供帮助! :) @Capax 对不起,我在写完之前错误地点击了提交,我刚刚编辑了我上面的评论! 好吧,只要设置条件 => if(numOfItems > 1),如果你想显示所有 if is lees than 1 或任何你需要的东西,但概念就是这样。 :) @Capax 也许更有意义的是,您还将按钮中的文本设置为全部显示或全部隐藏,并为每次点击设置不同的操作,这样您就可以避免一些问题。这是你的鞋子。 @Capax【参考方案2】:

您可以使用.toggleClass() 函数和类名作为参数和条件来检查可见元素的长度:

$('.open-close-all-button').on('click', function()
 event.preventDefault();
 $('.small-box').siblings().toggleClass('is-visible',$('.small-box').length != $('.small-box.is-visible').length);
);

Working Demo

【讨论】:

$('.small-box').siblings().toggleClass($('.small-box').length == $('.small-box:visible').length) @mplungjan:打算更新它。不确定参数顺序:)【参考方案3】:

完整的工作解决方案:(复制粘贴检查)

您自己的代码需要进行非常小的更改, 正确的 javascript 代码应该是这样的

$(document).ready(function()
    // Toggle individual boxes when clicking on buttons inside container
    $('.small-box-button').on('click', function(e)
      $(this).next('.small-box').toggleClass('is-visible');
    );

    // Open/close all boxes
    $('.open-close-all-button').on('click', function(e)
        if($(".small-box.is-visible").length < $(".small-box").length)
            $(".small-box:not([class*='is-visible'])").addClass("is-visible");
        else
            $(".small-box").removeClass("is-visible");
        
    );
);

我还更新了您的示例链接,它工作正常, 看看下面的链接并测试它是否是你所需要的:)

http://codepen.io/anon/pen/bVLvRK

【讨论】:

【参考方案4】:

我猜你正在寻找:hidden选择器:

$('.open-close-all-button').on('click', function()
  event.preventDefault();
  $('.small-box:hidden').addClass('is-visible');
);

【讨论】:

以上是关于如果一两个盒子打开/关闭,打开/关闭其余的(如果全部打开,关闭所有)的主要内容,如果未能解决你的问题,请参考以下文章

大神们,求救啊,用delphi7做

打开/关闭菜单时HTML在iOS中放大/缩小

J2ME RMS - 打开/关闭记录存储的最佳实践?

delphi平台,在一个主窗体上打开两个子窗体,也就是:打开一个子窗体之后,再打开第二个窗体第一个窗体不关闭

怎样用VB6 打开和关闭一个程序

打开/关闭母版页以获取webform