在 div 切换时防止子 div 移动答案

【问题标题】：Prevent children divs from moving while div toggle在 div 切换时防止子 div 移动
【发布时间】：2014-10-12 07:57:59
【问题描述】：

我是新手，我想解决非常简单的问题。

我有 4 个按钮来show/hide 每个面板。我应该怎么做才能防止子 div 在隐藏一些div 时向左移动？我更喜欢他们留在初始位置。

这是我的代码：

HTML：

    <button class="panel-button" data-panel="panel1">1</button>
    <button class="panel-button" data-panel="panel2">2</button>
    <button class="panel-button" data-panel="panel3">3</button>
    <button class="panel-button" data-panel="panel4">4</button>
    <div class="wrapper">
        <div id="panel1">1</div>
        <div id="panel2">2</div>
        <div id="panel3">3</div>
        <div id="panel4">4</div>
    </div>

JS：

        $(function() {
            $('.panel-button').on('click',function(){
                var panelId = $(this).data('panel');// attr('data-panel')
                $('#'+panelId).toggle();
            });
        });

CSS：

.wrapper {
    overflow: hidden;
    width: 420px;
}

.wrapper > div {
    width: 100px;
    height: 100px;
    background: green;
    float: left;
    margin-left: 5px;
    margin-top: 10px
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

但你仍然可以使用另一种方法

您可以使用 CSS 中的 visibility 属性来实现这一点，如下面的小提琴链接所示：link

JS 片段：

$(function() {

  $('.panel-button').on('click',function(){
    var panelId = $(this).data('panel');// attr('data-panel')
    console.log($('#'+panelId).css('visibility'));
    if($('#'+panelId).css('visibility') === 'hidden') {    
      $('#'+panelId).css('visibility','visible');
    }
    else {
      $('#'+panelId).css('visibility','hidden');
    }
  });
});

【讨论】：

【解决方案2】：

CSS visibility 旨在保留 DOM 对象占用的空间，但不实际渲染它。不透明度会改变其外观，但不会改变其行为（例如，仍可点击）。

所以不要使用 .toggle()，而是将 visibility 与 jQuery 的 .toggleClass() 结合起来：

jsFiddle solution

$(function() {
        $('.panel-button').on('click',function(){
            var panelId = $(this).data('panel');// attr('data-panel')
            $('#'+panelId).toggleClass('hideMe');
        });
    });

【讨论】：

我也考虑了 toggleClass 解决方案，但对我来说它不起作用。 .hidden {不透明度：0； var panelId = $('#' + $(this).data('panel')); panelId.toggleClass('hidden'); }
@kuba0506 jsFiddle 示例清楚地表明它可以完美运行

【解决方案3】：

将 css 规则 opacity = 0; 应用于 div，而不是隐藏它。
像这样：

$('.panel-button').on('click',function(){
    var pnl = $('#' + $(this).data('panel'));
    pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});

可点击性问题的解决方案：

$('.panel-button').on('click',function(){
    var pnl = $('#' + $(this).data('panel'));
    if(pnl.is(':visible'))
        $('<div></div>').appendTo(pnl).width(pnl.width());
    else
        pnl.next().remove();
    pnl.toggle();
});

【讨论】：

虽然这是一个有效的解决方案，但当里面有可点击的项目时，它们可能会出现问题。用户仍然可以点击它们。
不需要 hacky javascript，使用 CSS visiblity 而不是结合 jquery 的 toggleClass() （见另一个答案）。