1
votes

faire basculer l'affichage en fonction du clic sur l'élément précédent

En utilisant HTML et CSS, j'obtiens le résultat que je veux, mais c'est en utilisant .item: hover + desc {display: block;} - Je veux changer le hover code> à un événement click comme indiqué sur cette page https://opposite-art.glitch.me/

J'ai essayé beaucoup de options avec JS pour essayer d'y parvenir, j'ai finalement obtenu ceci:

 <div class="container">
      <div class="item">1</div>
      <div class="desc">Description 1</div>
      <div class="item">2</div>
      <div class="desc">Description 2</div>
      <div class="item">3</div>
      <div class="desc">Description 3</div>
      <div class="item">4</div>
      <div class="desc">Description 4</div>
      <div class="item">5</div>
      <div class="desc">Description 5</div>
      <div class="item">6</div>
      <div class="desc">Description 6</div>
      <div class="item">7</div>
      <div class="desc">Description 7</div>
      <div class="item">8</div>
      <div class="desc">Description 8</div>
...
</div>


.container {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 0.5em;
}

.item, 
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.item:hover + .desc {
  display: block;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}
  qui fonctionne correctement pour le premier div, mais ne fonctionnera pas pour les autres. 
 var box = document.querySelector('.desc');
document.querySelector('.item').addEventListener('click', function(el) {    
    if (box.style.display === 'none') {
        box.style.display = 'block';
        console.log(el);
    } else {
        box.style.display = 'none';
    }
});

javascript jquery html css

0 commentaires

3 Réponses :

1
votes

L'utilisation de jquery facilitera la tâche,

supprimera le style css qui `` affichera le div au survol, après avec jquery sur le clic sur l'élément, masquera toute la description extet en cours de clic, puis afficher ou masquer le clic actuel.

voir l'extrait ci-dessous

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
      <div class="item">1</div>
      <div class="desc">Description 1</div>
      <div class="item">2</div>
      <div class="desc">Description 2</div>
      <div class="item">3</div>
      <div class="desc">Description 3</div>
      <div class="item">4</div>
      <div class="desc">Description 4</div>
      <div class="item">5</div>
      <div class="desc">Description 5</div>
      <div class="item">6</div>
      <div class="desc">Description 6</div>
      <div class="item">7</div>
      <div class="desc">Description 7</div>
      <div class="item">8</div>
      <div class="desc">Description 8</div>
      <div class="item">9</div>
      <div class="desc">Description 9</div>
      <div class="item">10</div>
      <div class="desc">Description 10</div>
      <div class="item">11</div>
      <div class="desc">Description 11</div>
      <div class="item">12</div>
      <div class="desc">Description 12</div>
      <div class="item">13</div>
      <div class="desc">Description 13</div>
      <div class="item">14</div>
      <div class="desc">Description 14</div>
      <div class="item">15</div>
      <div class="desc">Description 15</div>
      <div class="item">16</div>
      <div class="desc">Description 16</div>
      <div class="item">17</div>
      <div class="desc">Description 17</div>
      <div class="item">18</div>
      <div class="desc">Description 18</div>
      <div class="item">19</div>
      <div class="desc">Description 19</div>
      <div class="item">20</div>
      <div class="desc">Description 20</div>
      <div class="item">21</div>
      <div class="desc">Description 21</div>
      <div class="item">22</div>
      <div class="desc">Description 22</div>
      <div class="item">23</div>
      <div class="desc">Description 23</div>
      <div class="item">24</div>
      <div class="desc">Description 24</div>
</div>

.container {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 0.5em;
}

.item, 
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}


.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

$(".item").on("click", function(e) { 
  //get curent description
  let $desc = $(this).next(".desc");
  // hide all other description execpt current
  $(".desc").not($desc).hide();
  // show or hide current description
  $desc.css("display") == "none" ? $desc.show() : $desc.hide();
  
})

1 commentaires

@SergioRapisarda vous êtes les bienvenus, si cela résout votre problème, acceptez simplement la réponse

0
votes

Utilisation de javascript brut sans JQuery

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Test</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="desc">Description 1</div>
      <div class="item">2</div>
      <div class="desc">Description 2</div>
      <div class="item">3</div>
      <div class="desc">Description 3</div>
      <div class="item">4</div>
      <div class="desc">Description 4</div>
      <div class="item">5</div>
      <div class="desc">Description 5</div>
      <div class="item">6</div>
      <div class="desc">Description 6</div>
      <div class="item">7</div>
      <div class="desc">Description 7</div>
      <div class="item">8</div>
      <div class="desc">Description 8</div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

.container {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 0.5em;
}

.item,
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

let lastVisibleDesc = null;
let items = document.querySelectorAll(".item");
items.forEach(item => {
  item.addEventListener("click", el => {
    let itemDesc = item.nextElementSibling;
    if (lastVisibleDesc) {
      lastVisibleDesc.style.display = "none";
    }
    lastVisibleDesc = itemDesc;
    itemDesc.style.display = "block";
  });
});

0 commentaires

0
votes

Vous pouvez le faire avec du JavaScript brut.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
      <div class="item">1</div>
      <div class="desc">Description 1</div>
      <div class="item">2</div>
      <div class="desc">Description 2</div>
      <div class="item">3</div>
      <div class="desc">Description 3</div>
      <div class="item">4</div>
      <div class="desc">Description 4</div>
      <div class="item">5</div>
      <div class="desc">Description 5</div>
      <div class="item">6</div>
      <div class="desc">Description 6</div>
      <div class="item">7</div>
      <div class="desc">Description 7</div>
      <div class="item">8</div>
      <div class="desc">Description 8</div>
...
</div>

.container {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 0.5em;
}

.item, 
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

$(function(){
  $(".item", this).click(function(){
    $(".desc").hide(); // Hide all exist descriptions
    $(this).next(".desc").show(); //show the one which is required.
  });
});

Ou si vous souhaitez utiliser jQuery.

<div class="container">
      <div class="item">1</div>
      <div class="desc">Description 1</div>
      <div class="item">2</div>
      <div class="desc">Description 2</div>
      <div class="item">3</div>
      <div class="desc">Description 3</div>
      <div class="item">4</div>
      <div class="desc">Description 4</div>
      <div class="item">5</div>
      <div class="desc">Description 5</div>
      <div class="item">6</div>
      <div class="desc">Description 6</div>
      <div class="item">7</div>
      <div class="desc">Description 7</div>
      <div class="item">8</div>
      <div class="desc">Description 8</div>
...
</div>

.container {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 0.5em;
}

.item, 
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

window.onload = function() {
    var item = document.getElementsByClassName('item');
    for(var i = 0; i < item.length; i++) {
        var curr = item[i]; 
      // Binding onclick event with all items
        curr.onclick = function(e) {
          var hideDesc = document.getElementsByClassName("desc");
          // Hiding all descriptions
    for(var i = 0; i < hideDesc.length; i++){
        hideDesc[i].style.display = "none";
    }
          // Showing the description
          e.target.nextElementSibling.style.display = "block";
        }
    }
}

0 commentaires