Javascript 防止子div在div切换时移动

我是新来的，有一个我认为很简单的问题要解决

我有4个按钮来显示/隐藏每个面板。在隐藏一些

div

时，我应该如何防止子div移到te左侧？ 我希望他们留在最初的位置

这是我的代码：

HTML:

CSS:

---

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

$（'.panel button'）。在（'click'，function（）上{
var pnl=$（'#'+$（this.data（'panel'））；
如果（pnl.is（'：visible'））
$（''）.appendTo（pnl.width（pnl.width（））；
其他的
pnl.next（）.remove（）；
pnl.toggle（）；
});

CSS的设计目的是保持DOM对象占用的空间，而不是实际渲染它。不透明度会改变其外观，但不会改变其行为（例如，仍然可以单击）

因此，不要使用.toggle（），而是将

可见性

与jQuery的：

---

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

您可以使用CSS中的

可见性

属性来实现这一点，如下面的Fiddle链接所示：

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

---

虽然这是一个有效的解决方案，但当内部有可单击的项目时，它们可能会出现问题。用户仍然可以剪切它们。不需要黑客javascript，使用CSS

visiblity

代替jquery的toggleClass（）（参见另一个答案）。我也考虑了toggleClass解决方案，但对我来说它不起作用。隐藏{opacity:0；var panelId=$（'#'+$（this.data（'panel'））；panelId.toggleClass（'hidden'）；}@kuba0506 jsFiddle示例清楚地说明了它的工作原理

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

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

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