Question

我是新手，我觉得很难解决这个问题。

每个面板我有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
}

Answer 1

将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();
});

Answer 2

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

您可以使用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');
    }
  });
});

Answer 3

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');
        });
    });

在div切换时防止儿童div移动

3 个答案: