如何用显示按钮的另一个按钮隐藏DIV?

时间:2019-02-20 18:13:49

标签: javascript jquery html css slidetoggle

我有几个DIV,每个DIV都有一个特定的按钮。 当我单击其中之一时,将显示特定的DIV。当我单击另一个按钮时,我希望关闭打开的DIV。我怎样才能做到这一点?

当我单击第一个按钮时,将显示DIV,当我单击第二个按钮时,将显示第一个DIV,而下面显示第二个DIV。

您可以在此处访问该网站:www.coramp.eu,以了解发生了什么。

我正在使用slideToggle来显示DIV。

$(document).ready(function(){
  $("#eds").click(function(){
    $("#edsContenu").slideToggle(500);
  });
});

$(document).ready(function(){
  $("#bridge").click(function(){
    $("#bridgeContenu").slideToggle(500);
  });
});

$(document).ready(function(){
  $("#stress").click(function(){
    $("#stressContenu").slideToggle(500);
  });
});

$(document).ready(function(){
  $("#sante").click(function(){
    $("#santeContenu").slideToggle(500);
  });
});

$(document).ready(function(){
  $("#cosmeto").click(function(){
    $("#cosmetoContenu").slideToggle(500);
  });
});

$(document).ready(function(){
  $("#polymere").click(function(){
    $("#polymereContenu").slideToggle(500);
  });
});

$(document).ready(function(){
  $("#vegetal").click(function(){
    $("#vegetalContenu").slideToggle(500);
  });
});
.vignettesContenus {
  padding: 5px;
  text-align: center;
  background-color: #00011f;
  display: none;

}

#contenus{
  background-color: #e8f1fa; 
  color : black;
  font-size: 28px;
  text-align: justify;
}
		<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>



<section id="vignettes"> 

			<div id="discovered" >

				<div id="file" class ="container">
					<input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px"/>
				</div>


				<div id="file" class ="container">
					<input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique"  height="250px" width="250px"/>
				</div>


			</div>

			<div id = "research">

				<div id="file" class ="container">
					<input id="stress" type="image" src="IMAGES/PNG/eau.png" alt="eau photonique" height="250px" width="250px" />
				</div>


				<div id="file" class ="container">
					<input id="sante" type="image" src="IMAGES/PNG/syst_biologique.png" alt="Photonic Biological system" height="250px" width="250px"/>
				</div>

			

				<div id="file" class ="container">
					<input id="cosmeto" type="image" src="IMAGES/PNG/principes_actifs.png" alt="Principe actif" height="250px" width="250px"/>
				</div>
		

				<div id="file" class ="container">
					<input id="vegetal" type="image" src="IMAGES/PNG/vegetal.png" alt="étude photonique des végétaux" height="250px" width="250px" />
				</div>
		

				<div id="file" class ="container">
					<input id="polymere" type="image" src="IMAGES/PNG/polymere.png" alt="étude photonique des polymères" height="250px" width="250px"/>
				</div>

			</div>

			
		</section>

		<section id="contenus">

			<div id="edsContenu" class="vignettesContenus">

				<section id="content">

					<div id="text">
					
						<p>EDS©, pour Electrophotonic DataPhoton System » est un dispositif unique permettant d’acquérir, dans le spectre UV, les luminescences d’un corps soumis à son action. Ces luminescences sont caractéristiques de l’objet étudié. <br><br> Le schéma ci-dessous montre le processus de capture d'images utilisé par notre dispositif patenté EDS.</p>

					</div>
				</section>

			</div>


			<div id="bridgeContenu" class="vignettesContenus">

				<section id="content">

					<div id="text">

						<p>Les ponts photoniques constituent une découverte importante sur laquelle une communication a été présentée, en 2014, à l’occasion d’une rencontre internationale organisée par la Bioelectromagnetic Society en Afrique du Sud.<br><br>
						Des ponts photoniques peuvent apparaître ou non, dans le spectre UV, lorsque deux produits ou un système biologique et un produit sont placés à proximité l’un de l’autre sur une électrode spécifique appelée « support de conteneurs » et qu’un champ électromagnétique important est généré.	</p>

						

					</div>	
				</section>

			</div>


		<div id="stressContenu" class="vignettesContenus">
			<section id="content">
			
				<div id="text">

					<p>Tous les liquides, y compris les huiles et huiles essentielles, peuvent faire l’objet d’investigation photonique avec le dispositif EDS©. Outre leurs valeurs énergétiques (au sens électron / photon), un rapport de synthèse détaillé peut être réalisé comprenant un ensemble d’indicateurs tels que celui d’une validation intra-lot par exemple.</p><br><br>
					Voici quelques exemples de captation réalisés à partir de différents types de liquide :<br><br>
														<h3> Survolez les vignettes pour obtenir les légendes</h3>

				</div>				
			</section>

		</div>

		<div id="santeContenu" class="vignettesContenus">

			<section id="content">
			
			<div id="text">

				<p> Avec le dispositif EDS©, il est possible de visualiser les luminescences émergeant de l’extrémité des doigts d’une personne. Une fois enregistrées, ces luminescences peuvent être quantifiées sectoriellement et corrélées avec un état d’être du moment.</p>

													<h3> Survolez les vignettes pour obtenir les légendes</h3>


			</div>				
		</section>

		</div>


		<div id="cosmetoContenu" class="vignettesContenus">

			<section id="content">
			
			<div id="text">

				<p>Les effets de couronne obtenus avec le dispositif EDS© montrent des géométrisations, des valeurs énergétiques (au sens électron / photon) et d’autres caractéristiques propres à chaque produit. Tous ces éléments sont des paramètres importants qui peuvent être utilisés dans le cadre de l’optimisation d’un produit (par exemples : tester différents excipients ou conditionnements, vérifier le comportement dans le temps, etc...)</p>

			</div>				
		</section>

		</div>


			<div id="polymereContenu" class="vignettesContenus">
				
				<section id="content">
			
			<div id="text">

				<p>Avec le dispositif EDS©, la matière inerte peut être observée sous un œil nouveau en mettant en évidence des éléments difficilement accessibles autrement.
				A titre d’exemple, voici deux échantillons d’un même polymère (l’un primérisé, l’autre non) avec des différences photoniques suffisamment significatives pour les caractériser, là où aucun marqueur physico- chimique n’est à même de le faire.</p>

			</div>				
		</section>

			</div>

			<br>

			<div id="vegetalContenu" class="vignettesContenus">
				
				<section id="content">
			
			<div id="text">

				<p>Les végétaux et tout ce qui concerne la biodiversité en général se prêtent aux investigations menées avec le dispositif EDS©.
				Comme le montrent les images ci-dessous, plusieurs types de travaux peuvent être menés pour définir, par exemple, la signature photonique d’une espèce ou encore son niveau de vitalité.</p>

			</div>				
		</section>


			</div>


		</section>

2 个答案:

答案 0 :(得分:2)

你快到了...

$(document).ready(function(){
   $("#bridge").click(function(){

     /// this checks if a DIV is open
     /// when true it closes the DIV
     if(window.openDIV){
        window.openDIV.slideToggle(500);
     };

     /// opening new DIV
     $("#bridgeContenu").slideToggle(500);

     /// This sets the new opened DIV
     window.openDIV = $("#bridgeContenu");
   });
});

只需在代码中的每个DIV上执行此操作,它就应该像魅力一样工作

答案 1 :(得分:1)

$(document).ready(function() {
  $('input[type=image]').click(function() {
    var contentID = `#${this.id}Contenu`;
    var isContentVisible = $(contentID).is(':visible');
    if (!isContentVisible) {
      $('div[id$=Contenu]').slideUp(500);
      $(contentID).slideDown(500);
    } else {
      $(contentID).slideUp(500);
    }
  });
});
.vignettesContenus {
  padding: 5px;
  text-align: center;
  background-color: #00011f;
  display: none;
}

#contenus {
  background-color: #e8f1fa;
  color: black;
  font-size: 28px;
  text-align: justify;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>



<section id="vignettes">

  <div id="discovered">

    <div id="file" class="container">
      <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" />
    </div>


    <div id="file" class="container">
      <input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" />
    </div>


  </div>

  <div id="research">

    <div id="file" class="container">
      <input id="stress" type="image" src="IMAGES/PNG/eau.png" alt="eau photonique" height="250px" width="250px" />
    </div>


    <div id="file" class="container">
      <input id="sante" type="image" src="IMAGES/PNG/syst_biologique.png" alt="Photonic Biological system" height="250px" width="250px" />
    </div>



    <div id="file" class="container">
      <input id="cosmeto" type="image" src="IMAGES/PNG/principes_actifs.png" alt="Principe actif" height="250px" width="250px" />
    </div>


    <div id="file" class="container">
      <input id="vegetal" type="image" src="IMAGES/PNG/vegetal.png" alt="étude photonique des végétaux" height="250px" width="250px" />
    </div>


    <div id="file" class="container">
      <input id="polymere" type="image" src="IMAGES/PNG/polymere.png" alt="étude photonique des polymères" height="250px" width="250px" />
    </div>

  </div>


</section>

<section id="contenus">

  <div id="edsContenu" class="vignettesContenus">

    <section id="content">

      <div id="text">

        <p>EDS©, pour Electrophotonic DataPhoton System » est un dispositif unique permettant d’acquérir, dans le spectre UV, les luminescences d’un corps soumis à son action. Ces luminescences sont caractéristiques de l’objet étudié. <br><br> Le schéma
          ci-dessous montre le processus de capture d'images utilisé par notre dispositif patenté EDS.</p>

      </div>
    </section>

  </div>


  <div id="bridgeContenu" class="vignettesContenus">

    <section id="content">

      <div id="text">

        <p>Les ponts photoniques constituent une découverte importante sur laquelle une communication a été présentée, en 2014, à l’occasion d’une rencontre internationale organisée par la Bioelectromagnetic Society en Afrique du Sud.<br><br> Des
          ponts photoniques peuvent apparaître ou non, dans le spectre UV, lorsque deux produits ou un système biologique et un produit sont placés à proximité l’un de l’autre sur une électrode spécifique appelée « support de conteneurs » et qu’un
          champ électromagnétique important est généré. </p>



      </div>
    </section>

  </div>


  <div id="stressContenu" class="vignettesContenus">
    <section id="content">

      <div id="text">

        <p>Tous les liquides, y compris les huiles et huiles essentielles, peuvent faire l’objet d’investigation photonique avec le dispositif EDS©. Outre leurs valeurs énergétiques (au sens électron / photon), un rapport de synthèse détaillé peut
          être réalisé comprenant un ensemble d’indicateurs tels que celui d’une validation intra-lot par exemple.</p><br><br> Voici quelques exemples de captation réalisés à partir de différents types de liquide :<br><br>
        <h3> Survolez les vignettes pour obtenir les légendes</h3>

      </div>
    </section>

  </div>

  <div id="santeContenu" class="vignettesContenus">

    <section id="content">

      <div id="text">

        <p> Avec le dispositif EDS©, il est possible de visualiser les luminescences émergeant de l’extrémité des doigts d’une personne. Une fois enregistrées, ces luminescences peuvent être quantifiées sectoriellement et corrélées avec un état d’être
          du moment.</p>

        <h3> Survolez les vignettes pour obtenir les légendes</h3>


      </div>
    </section>

  </div>


  <div id="cosmetoContenu" class="vignettesContenus">

    <section id="content">

      <div id="text">

        <p>Les effets de couronne obtenus avec le dispositif EDS© montrent des géométrisations, des valeurs énergétiques (au sens électron / photon) et d’autres caractéristiques propres à chaque produit. Tous ces éléments sont des paramètres importants
          qui peuvent être utilisés dans le cadre de l’optimisation d’un produit (par exemples : tester différents excipients ou conditionnements, vérifier le comportement dans le temps, etc...)</p>

      </div>
    </section>

  </div>


  <div id="polymereContenu" class="vignettesContenus">

    <section id="content">

      <div id="text">

        <p>Avec le dispositif EDS©, la matière inerte peut être observée sous un œil nouveau en mettant en évidence des éléments difficilement accessibles autrement. A titre d’exemple, voici deux échantillons d’un même polymère (l’un primérisé,
          l’autre non) avec des différences photoniques suffisamment significatives pour les caractériser, là où aucun marqueur physico- chimique n’est à même de le faire.</p>

      </div>
    </section>

  </div>

  <br>

  <div id="vegetalContenu" class="vignettesContenus">

    <section id="content">

      <div id="text">

        <p>Les végétaux et tout ce qui concerne la biodiversité en général se prêtent aux investigations menées avec le dispositif EDS©. Comme le montrent les images ci-dessous, plusieurs types de travaux peuvent être menés pour définir, par exemple,
          la signature photonique d’une espèce ou encore son niveau de vitalité.</p>

      </div>
    </section>


  </div>


</section>

只需用此代码替换您的jquery代码。