堆棧內存溢出
  簡體   English   中英

JavaScript顯示/隱藏div

[英]JavaScript show/hide divs

 原文  2018-06-05 18:06:31  3   5    javascript/ html/ css/ twitter-bootstrap

問題描述

有誰知道單擊div框時是否有辦法隱藏某些div？

單擊該框后，某些應用程序div將隱藏。 這是第一張圖片：

隱藏這些框后，其他div將在當前div的位置重新對齊，然后移回標准視圖。 第二張圖片：

碼： 

 <div class="container"> <div class="row"> <div class="col-md-4" style="text-align: center;"> <button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div> </div> </div> <hr /> <div class="row"> <div class="col-md-4" style="text-align: center;"> <div 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 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 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 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 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 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> <script> function projectCollab() { var x = document.getElementById("decisionTreeOneDrive"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </div>

忽略文本中的JavaScript代碼，似乎根本無法正常工作。

5 個解決方案

解決方案1
 0 已采納  2018-06-05 18:16:04

您有帶有similair ID的div。 嘗試使用另一個選擇器，例如數據屬性。 

<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="projects" style="font-size: larger;">Collaborate on Projects</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="files" style="font-size: larger;">Collaborate on Files</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="socially" style="font-size: larger;">Collaborate Socially</div>
                </div>
            </div>
            <hr />
            <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>
            <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>
    </body>
</html>

解決方案2
 0  2018-06-05 18:19:24

您可以簡單地使用jQuery .toggle()函數在隱藏和顯示之間切換，它將自動排列相鄰的div。 

 $(document).ready(function() { $('#decisionTreeBox').on('click', function() { $('#test').toggle('show'); }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4" style="text-align: center;"> <button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div> </div> </div> <hr /> <div class="row"> <div class="col-md-4" style="text-align: center;" id="test"> <div 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 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 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 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 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 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>

解決方案3
 0  2018-06-05 18:21:47

要隱藏哪個元素，可以使用此參數調用函數onclick =“ function（this）”。 嘗試下面的給定示例。 

<div class="container">
    <div class="row">
           <div class="col-md-4" style="text-align: center;">
             <button onclick="projectCollab(this)"><div class="container">

在項目上進行協作在文件上進行協作在社會上進行協作

OneDrive項目SharePoint團隊規划師Yammer函數projectCollab（）{var x = document.getElementById（“ decisionTreeOneDrive”）; 如果（x.style.display ===“ none”）{x.style.display =“ block”; } else {x.style.display =“ none”; }}

解決方案4
 0  2018-06-05 18:29:26

HTML只是您的副本，但是如果您更喜歡使用js而不是jquery，則下面的JS函數應該可以為您提供幫助。 

<div class="container">
   <div class="row">
        <div class="col-md-4" style="text-align: center;">
            <button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-md-4" style="text-align: center;">
            <div 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 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 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 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 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 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>
    <script>
    function projectCollab() {
        var x = document.getElementById("decisionTreeOneDrive").setAttribute("onclick", hide());
    }
    function hide(){
        var sharepoint = document.getElementById("decisionTreeSharePoint");
        var planner = document.getElementById("decisionTreePlanner");
        if (sharepoint.style.display === "none") {
            sharepoint.style.display = "block";
        } else {
            sharepoint.style.display = "none";
        }

        if (planner.style.display === "none") {
            planner.style.display = "block";
        } else {
            planner.style.display = "none";
        }
    }
    </script>
</div>

解決方案5
 0  2018-06-05 18:46:42

我認為您遇到了兩個問題。

  1. 您要切換下面的正方形。
  2. 您希望框在剩余的空間中折疊。

為了解決問題1，我創建了一個不依賴任何框架的普通javascript切換。

這需要對HTML進行三個更新

  • 在每個按鈕上創建onClick切換功能： onclick=toggleSquares('DESTINATION');
  • 將目標添加到要切換的CSS列元素（解決＃2）： data-toggle="files"
  • 在CSS列元素上添加CSS類掛鈎（可選）。

<button onclick=toggleSquares('projects')> <div id="decisionTreeBox">Collaborate on Projects</div> </button>

... 

<div class="col-md-4 square" data-toggle="projects">
    <div>
          <h3 id="innerBoxHeadings">OneDrive</h3>
    </div>
</div>

`

javascript函數如下所示： 

function toggleSquares(type){
   var getSquares = document.querySelectorAll(".square");

  getSquares.forEach(function(element){

    if(element.getAttribute('data-toggle') != type) {
      element.classList.add('display-none');
    }
    else {
      element.classList.remove('display-none');
    }
  })
}

要逐步進行交互：

  1. 單擊時，抓住所有具有“ .square”類的元素，並將它們添加到函數本地的變量中。
  2. 循環遍歷該變量對象，並將其與通過函數傳遞的type進行比較
  3. 如果該元素與向下傳遞的類型不匹配，請添加具有'display：none'屬性的css類。
  4. 如果元素確實與傳遞的類型匹配，請刪除css類（如果已在步驟3中添加了該類）。

這是概述上述交互的一個代碼筆： https ://codepen.io/MathiasaurusRex/pen/aKZbqR

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 JavaScript 顯示/隱藏 DIV Javascript跳過隱藏/顯示div 顯示/隱藏DIV的Javascript循環 Javascript隱藏顯示動態div 使用javascript隱藏和顯示div javascript函數顯示和隱藏div 使用JavaScript隱藏/顯示特定的div 使用javascript顯示/隱藏divs說明 Javascript / JQuery-隱藏5個Div，然后顯示3個隨機Div 基於按鈕單擊的JavaScript隱藏/顯示DIV
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM