переключать отображение на основе предыдущего нажатия кнопки - PullRequest
Новая
       4

переключать отображение на основе предыдущего нажатия кнопки

1 голос
/ 21 сентября 2019

Используя HTML и CSS, я достигаю желаемого результата, однако это достигается с помощью .item:hover + desc {display: block;} - я хочу изменить hover на click событие, как показано на этой странице https://opposite -art.glitch.me /

Перепробовал множество различных вариантов с JS, чтобы попытаться добиться этого, наконец-то получил: 

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';
    }
});

, который работает правильно для первого div, ноне будет работать для других. 

<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;
}

Ответы [ 3 ]

1 голос
/ 21 сентября 2019

Использование jquery облегчит задачу,

удалит стиль css, который отображает div при наведении курсора, после того, как с помощью jquery щелкните элемент, скрыть все описания, расширить текущий щелчок, а затем показать или скрыть текущий щелчок.

см. Ниже фрагмент 

$(".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();
  
})
.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;
}
<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>
0 голосов
/ 21 сентября 2019

Вы можете сделать это с простым JavaScript. 

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";
        }
    }
}
.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;
}
<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>

Или, если вы хотите использовать jQuery. 

$(function(){
  $(".item", this).click(function(){
    $(".desc").hide(); // Hide all exist descriptions
    $(this).next(".desc").show(); //show the one which is required.
  });
});
.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;
}
<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>
0 голосов
/ 21 сентября 2019

Использование простого JavaScript без JQuery 

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";
  });
});
.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;
}
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...