onclick 分别水平展开和收缩 div答案

【问题标题】：Expand and contract divs separately horizontally onclickonclick 分别水平展开和收缩 div
【发布时间】：2012-08-14 22:38:00
【问题描述】：

我在下面有一个 jfiddle，它有两个链接，可以独立和水平地扩展两个 div。 http://jsfiddle.net/j9W7R/

我将如何导致在任何给定时间只看到一个 div？假设您单击第一个，然后单击第二个，它会导致第一个收缩。或者，如果您单击第一个并再次单击第一个，它也会缩回。

这个想法是链接将是 Facebook 图标，下一个链接将是另一个社交媒体图标，等等，我将嵌入一点“喜欢我们”或与用户进行某种互动。

【问题讨论】：

一次显示一个。是的，如果再次单击 div 它将收回并返回它的来源。就像手风琴脚本一样，但水平方向。下面的示例很棒，我现在就试试看，但我最终可能要点击 3、4 或 5 个图标，所以这 2 个只是一个开始。

标签： html onclick expand contract

【解决方案1】：

你可以用下一个方法：

为你所有的滑动<div>s 添加一些类。以class="slickbox" 为例。

每个.click() 都以$('.slickbox').hide(); 开头，首先隐藏所有框，然后展开您需要的框。

例如：

<div style="clear:both;">

  <div style="float:left;">
    <a href="#" id="slick-slidetoggle2">Slide toggle the box 2</a>
  </div>

  <div id="slickbox2" class="slickbox">
    2: This is the box that will be shown and hidden and toggled at your whim. :)
  </div>

</div>

clicks 之一将如下所示。

$('#slick-slidetoggle2').click(function() {
    $('.slickbox').hide(); // hide all boxes (doesn't matter if they were opened or not)
    $('#slickbox2').show('slide', 400); // and open one that was clicked
    return false;
});

这样您就可以扩展您的Like Us 轻松添加新项目，而无需为每个打开/关闭的项目编写.hide()。

更新：如果您需要在用户再次点击时关闭项目，您可以将按钮.click() 处理程序的show/hide 部分更改为以下.

$('#slick-slidetoggle2').click(function() {

    if ( $('#slickbox2').is(':hidden') ) { // check if current box is hidden
        $('.slickbox').hide(); // hide all boxes (doesn't matter if they were opened or not)
        $('#slickbox2').show('slide', 400); // and open this one
    } else // if it was already opened
        $('#slickbox2').hide('slide', 400); // hiding the box

    return false;
});

:hidden 选择器将跟踪对象的状态可见性，并据此决定如何处理该框。

【讨论】：

好的，我会试试这个。描述得很好！
我已经完成了第一部分的工作，但我似乎找不到在哪里输入您粘贴的更新。是的，我需要在点击后关闭项目。这是有道理的，我让它单独工作，但不知道如何组合。我是将更新的代码粘贴到第一部分还是替换第一部分？ jsfiddle.net/j9W7R/8
@LITguy，更新了完整的例子，如果它被打开了。
我可能弄错了，但它不能正常工作。它似乎没有关闭，可能是因为第一个 $('.slickbox').hide();脚本导致它跳转关闭而不是允许点击收缩？
@LITguy，是的。我的错。对不起。我已经更新了代码。尝试它是否正常工作。现在没有足够的时间检查。