在div切换时防止子div移动

kuba0506 发表于 Dev

kuba0506

我是新手，我认为要解决的问题很简单。

show/hide每个面板都有4个按钮。我应该怎么做才能防止孩子的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
}

加内什·贾达夫（Ganesh Jadhav）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。