在div hide / show上填充白色空格

Question

我有代码隐藏我在下面的图片中显示的点击上的某些div，但是我如何将这些图块填入隐藏div上的空白区域然后再次显示这些框时返回到他们的位置？

Image 1

Image 2

代码：

.decisionTreeBox {
	background-color: #4B92DB;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreeOneDrive {
	background-color: #094AB2;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreeProject {
	background-color: #3C8B12;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreeSharePoint {
	background-color: #008CE7;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreeTeams {
	background-color: #4A1EBD;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreePlanner {
	background-color: #247D0E;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreeYammer {
	background-color: #39A4C1;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#innerBoxHeadings {
	color: white!important; 
	text-align: center; 
	padding-top: 5px;
}

#columnMiddleBorderLeft, #pageTitle {
	display:none!important;
}

<div class="outer-container">
            <div class="row">
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="projects" class="decisionTreeBox" style="font-size: larger;">
						Collaborate on Projects</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="files" class="decisionTreeBox" style="font-size: larger;">
						Collaborate on Files</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="socially" class="decisionTreeBox" style="font-size: larger;">
						Collaborate Socially</div>
                </div>
            </div>
            <hr />
            <div class="container" style="padding: 0px;">
            <div class="row">
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="projects" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
                    </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
                    </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
                    </div>
                </div>
                <div class="row" style="margin-top: 40px;">
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="files" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="socially" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
                </div>
            </div>
            </div>
            <script>
            function projectCollab(){
                var divsToCange = document.querySelectorAll('[data-decision]'),
                    attr = this.getAttribute('data-collaborate');

                for(var i = 0; i < divsToCange.length; i++){
                    var d = divsToCange[i];

                    if(d.getAttribute('data-decision') == attr){
                        d.style.display = (!d.style.display) ? 'none' : '';
                    }else{
                        d.style.display = '';
                    }
                }
                return false;
            }

            var divButtons = document.querySelectorAll('[data-collaborate]');

            for(var i = 0; i < divButtons.length; i++){
                divButtons[i].addEventListener('click', projectCollab);
            }
            </script>
</div>

更新

我选择了Fadi的路径，并将它们全部放在一行。

以下是我对Fadi代码的最新问题： https://i.stack.imgur.com/mbkGX.png

我希望在第二行列之间始终存在页边空格，如何在没有第二行的情况下实现此目的？

Answer 1

试试这个：

＆＃13;

＆＃13;

function projectCollab() {
      var divsToCange = document.querySelectorAll('[data-decision]'),
        attr = this.getAttribute('data-collaborate');

      for (var i = 0; i < divsToCange.length; i++) {
        var d = divsToCange[i];

        if (d.getAttribute('data-decision') == attr) {
          d.style.display = (!d.style.display) ? 'none' : '';
        } else {
          d.style.display = '';
        }
      }
      return false;
    }

    var divButtons = document.querySelectorAll('[data-collaborate]');

    for (var i = 0; i < divButtons.length; i++) {
      divButtons[i].addEventListener('click', projectCollab);
    }
    

＆＃13;

.decisionTreeBox {
  background-color: #4B92DB;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeOneDrive {
  background-color: #094AB2;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeProject {
  background-color: #3C8B12;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeSharePoint {
  background-color: #008CE7;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeTeams {
  background-color: #4A1EBD;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreePlanner {
  background-color: #247D0E;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeYammer {
  background-color: #39A4C1;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#innerBoxHeadings {
  color: white!important;
  text-align: center;
  padding-top: 5px;
}

#columnMiddleBorderLeft,
#pageTitle {
  display: none!important;
}

＆＃13;

<div class="outer-container">
  <div class="row">
    <div class="col-md-4" style="text-align: center;">
      <div data-collaborate="projects" class="decisionTreeBox" style="font-size: larger;">
        Collaborate on Projects</div>
    </div>
    <div class="col-md-4" style="text-align: center;">
      <div data-collaborate="files" class="decisionTreeBox" style="font-size: larger;">
        Collaborate on Files</div>
    </div>
    <div class="col-md-4" style="text-align: center;">
      <div data-collaborate="socially" class="decisionTreeBox" style="font-size: larger;">
        Collaborate Socially</div>
    </div>
  </div>
  <hr />
  <div class="container" style="padding: 0px;">
    <div class="row">
      <div class="col-md-4" style="text-align: center;">
        <div data-decision="projects" id="decisionTreeOneDrive">
          <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
        </div>
      </div>
      <div class="col-md-4" style="text-align: center;">
        <div data-decision="projects" id="decisionTreeProject">
          <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Project</h3>
        </div>
      </div>
      <div class="col-md-4" style="text-align: center;">
        <div data-decision="files" id="decisionTreeSharePoint">
          <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
        </div>
      </div>
      <div class="col-md-4" style="text-align: center;">
        <div data-decision="files" id="decisionTreeTeams">
          <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
        </div>
      </div>
      <div class="col-md-4" style="text-align: center;">
        <div data-decision="socially" id="decisionTreePlanner">
          <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Planner</h3>
        </div>
      </div>
      <div class="col-md-4" style="text-align: center;">
        <div data-decision="socially" id="decisionTreeYammer">
          <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Yammer</h3>
        </div>
      </div>
    </div>
    <div class="row" style="margin-top: 40px;">
      
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这有用吗？

Answer 2

这是你应该做的 首先将所有引导列仅放在一行中

第二点是这件js

            for(var i = 0; i < divsToCange.length; i++){
                var d = divsToCange[i];
                if(d.getAttribute('data-decision') == attr){
                    d.parentNode.style.display ='none' ;
                }
                else{
                    d.parentNode.style.display = 'block';
                }
            }

这里是完整的html + JS

<div class="outer-container">
        <div class="row">
            <div class="col-md-4" style="text-align: center;">
                <div data-collaborate="projects" class="decisionTreeBox" style="font-size: larger;">
                    Collaborate on Projects</div>
            </div>
            <div class="col-md-4" style="text-align: center;">
                <div data-collaborate="files" class="decisionTreeBox" style="font-size: larger;">
                    Collaborate on Files</div>
            </div>
            <div class="col-md-4" style="text-align: center;">
                <div data-collaborate="socially" class="decisionTreeBox" style="font-size: larger;">
                    Collaborate Socially</div>
            </div>
        </div>
        <hr />
        <div class="container" style="padding: 0px;">
        <div class="row">
            <div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="projects" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
                </div>
            <div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
                </div>
            <div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
                </div>
            <div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="files" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
            </div>
            <div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="socially" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
            </div>
            <div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
            </div>
        </div>
        </div>
        <script>
        function projectCollab(){
            var divsToCange = document.querySelectorAll('[data-decision]'),
                attr = this.getAttribute('data-collaborate');

            for(var i = 0; i < divsToCange.length; i++){
                var d = divsToCange[i];
                console.log("2@ ",attr)
                if(d.getAttribute('data-decision') == attr){
                    d.parentNode.style.display ='none' ;
                }
                else{
                    d.parentNode.style.display = 'block';
                }
            }
            return false;
        }

        var divButtons = document.querySelectorAll('[data-collaborate]');

        for(var i = 0; i < divButtons.length; i++){
            divButtons[i].addEventListener('click', projectCollab);
        }
        </script>

        的修改 对于间距问题，请在您的样式标签中定义

    <style>

.margin-bottom-20{
    margin-bottom:20px;
  }
... rest of your styles 

我还更新了html以获取如上所示的类名 我所做的只是<div class="col-md-4 margin-bottom-20" style="text-align: center;">

Answer 3

我使用了jQuery和CSS grid-auto-flow Property的组合 达到效果。

我还使用toggle()方法将可见性切换为测试。

＆＃13;

＆＃13;

$('.item1').click((e) => {
  e.stopPropagation();
  e.preventDefault();
  $(".item5, .item6").toggle();
});

＆＃13;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
}

div {
  text-align: center;
  padding: 15px;
}

[class^='item'] {
  background-color: #2196F3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container controller" style="grid-auto-flow: row;">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

<hr>

<div class="grid-container" style="grid-auto-flow: row;">
  <div class="item5">1</div>
  <div class="item6">2</div>
  <div class="item7">3</div>
  <div class="item8">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;