JavaScript Show / Hide divs

SaintLouis Events спросил: 12 мая 2018 в 04:26 в: javascript

Кто-нибудь знает, есть ли способ скрыть скрытие 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 в тексте, он, похоже, не работает должным образом.

Любая помощь / руководства будут полезны , большое спасибо!

javascript html css twitter-bootstrap

Adam Azad ответил: 12 мая 2018 в 04:29
Какую версию Bootstrap вы используете?
SaintLouis Events ответил: 12 мая 2018 в 04:29
Bootstrap 3 @AdamAzad
j08691 ответил: 15 мая 2018 в 07:03
@SaintLouisEvents Мы не делаем "SOLVED" в названиях здесь
SaintLouis Events ответил: 15 мая 2018 в 07:15
@ j08691 Спасибо за бутон обновления! Я новичок, поэтому не был уверен, что я должен обновлять людей.

6 ответов

Есть решение
Vitalii ответил: 12 мая 2018 в 04:56

У вас есть divs с похожими идентификаторами. Попробуйте использовать другой селектор, как пример атрибутов данных.

<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>
SaintLouis Events ответил: 12 мая 2018 в 04:38
Привет @Vitalii, это помогает, но я уже пробовал это, и все, что он делает, скрывает единственный div и не подталкивает другой следующий div на своем месте. Все, что делает это, приводит к исчезновению div, и страница начинает перезагрузку.
Vitalii ответил: 12 мая 2018 в 04:57
@SaintLouisEvents Я модифицировал код. Надеюсь, это поможет.
SaintLouis Events ответил: 13 мая 2018 в 11:50
Это помогает так много @vitalii! У меня все еще есть проблема с заполнением белых ящиков, как только div исчезнет.
suzan ответил: 12 мая 2018 в 04:39

Вы можете просто использовать функцию 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>
SaintLouis Events ответил: 12 мая 2018 в 04:40
Привет @suzan, спасибо за вход! Я проверю это сейчас. UPDATE: Это работает, скрывая div, поэтому я ценю помощь в этом. Нажав на поле, он обновит страницу, есть ли причина для этого?
suzan ответил: 12 мая 2018 в 05:32
нет, он не обновляет страницу. Он просто переключает стиль для конкретного div на клик.
dipak harishbhai ответил: 12 мая 2018 в 04:41

Какой элемент вы хотите скрыть, вы можете вызвать функцию 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">

Сотрудничайте с ProjectsCollaborate on FilesCollaborate Socially

OneDriveProjectSharePointTeamsPlannerYammerfunction projectCollab () {var x = document.getElementById ("decisionTreeOneDrive"); if (x.style.display ==="none") {x.style.display ="block" ;} else {x.style.display ="none";}}
SaintLouis Events ответил: 12 мая 2018 в 04:46
Привет @dipak harishbhai, спасибо за вход! Это работает, но это не делает выравнивание div в точках текущих ящиков.
daisy ответил: 12 мая 2018 в 04:49

HTML - это только ваша копия, но функции JS ниже должны помочь вам, если вы предпочитаете использовать js вместо jquery.

<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>
SaintLouis Events ответил: 12 мая 2018 в 04:53
Спасибо за вход @Daisy Priede, я буду тестировать это прямо сейчас.
SaintLouis Events ответил: 12 мая 2018 в 05:26
Спасибо за обновление @Mathias! Я буду принимать все эти предложения и проверять их прямо сейчас.
Mathias Rechtzigel ответил: 12 мая 2018 в 05:13

Я думаю, что вы сталкиваетесь с двумя проблемами.

  1. Вы хотите переключить квадраты ниже.
  2. Вы хотите, чтобы поля сбрасывались в оставшемся пространстве.

Чтобы решить проблему # 1, я создал ванильный javascript-переключатель, который не полагается на какие-либо frameworks

Для этого требуется три обновления для 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. Если элемент не соответствует типу, который был передан - добавьте класс css с 'disp lay: none '.
  4. Если элемент соответствует типу, который был передан, удалите класс css, если он был добавлен на шаге 3.

Вот код, который описывает вышеупомянутое взаимодействие: https://codepen.io/MathiasaurusRex/pen/aKZbqR

pythonx1445
javascriptx1424
javax930
androidx775
c#x750
phpx722
htmlx627
sqlx442
cssx428
angularx395
jqueryx377
rx368
mysqlx350
c++x340
python-3.xx337
node.jsx332
reactjsx325
iosx304
swiftx299
jsonx262
pandasx245
sql-serverx237
arraysx228
excelx214
laravelx196
vbax192
typescriptx185
djangox174
wordpressx151
firebasex147
regexx146
cx140
asp.netx130
springx129
oraclex127