Как я могу закрыть аккордеон на мобильном телефоне? - PullRequest
Новая
       48

Как я могу закрыть аккордеон на мобильном телефоне?

0 голосов
/ 25 февраля 2019

У меня есть аккордеон, использующий только HTML и CSS (без JS).

Для рабочего стола я наведите курсор мыши, чтобы развернуть, и уберите мышь, чтобы закрыть панель.

Для мобильных устройств,Я нажимаю, чтобы развернуть, , но нажатие на тот же объект не закрывает его .Я должен нажать на пустое пространство, чтобы закрыть панель, которая не является интуитивно понятной.

ВОПРОС: Как я могу написать этот код, чтобы я нажимал на аккордеоне, чтобы закрыть панель? ... JSединственный способ?

HTML 

  <div class="slider-containers">

<!--effect #1 -->
<div class="slider-container">
  <div class="flexbox-slider flexbox-slider-1">
    <div class="flexbox-slide">
      <div class="img-overlay"><div class="start">ENGAGE<span id="accordion-expand">+</span></div>
      <img src="https://images.pexels.com/photos/1464213/pexels-photo-1464213.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
      </div>

      <div class="text-block">
        <h3>Engage</h3>
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
        </div>
      </div>
      <div class="slide-bottom"></div>
    </div>
    <div class="flexbox-slide">
      <div class="img-overlay">
        <div class="start">EDUCATE<span id="accordion-expand">+</span></div>
      <img src="https://images.pexels.com/photos/1350615/pexels-photo-1350615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
      </div>
      <div class="text-block">
        <h3>Educate</h3>
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
        </div>
      </div>
    </div>
    <div class="flexbox-slide">
      <div class="img-overlay">
        <div class="start">EMPOWER<span id="accordion-expand">+</span></div>
  <img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
      </div>
  <div class="text-block">
    <h3>Empower</h3>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
    </div>
  </div>
</div>

CSS 

$slider-height: 500px;
$text-block-width: 400px;

$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;

//transitions and mixins

//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}



.container {
  width: 1100px;
  margin: 50px auto 0;


}

  .link {
    display: flex;
    justify-content: center;
    width: 800px;
    margin: 30px auto 0;

    a {
      @include transition-mix;

      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-right: 40px;
      color: inherit;
      font: {
        size: inherit;
      }
      text-decoration: none;

      &:hover {
        color: $accent-font-color;
      }

      &:last-child {
        margin-right: 0;
      }

      i {
        color: $accent-font-color;
        margin-right: 9px;
        font-size: 30px;
      }
    }
  }

.slider-containers {
  width: 100%;
  margin: 60px  ;
}

.slider-container {
  margin-bottom: 60px;

  h2 {
    text-align: center;
  }
}

.flexbox-slider {
  margin-top: 50px;
}

.flexbox-slider {
  display: flex;
  width: 100%;
  height: $slider-height;
  visibility: hidden;

  .flexbox-slide {
    @include transition-mix($duration: .3s);

    width: 33%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    visibility: visible;
    transform: skewx(-8deg);

    //overlay
    &:after {
      @include position-absolute($top: 0, $left: 0);
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
      z-index: 2;

      opacity: 0;
    }

    img {
      @include position-absolute($top: 50%, $left: 50%);
      height: auto;
      width: auto;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

    .text-block {
      @include position-absolute($bottom: 30px, $left: 30px);
      max-width: $text-block-width;
      padding: 20px;
      border-radius: 5px;
      background-color: rgba($text-overlay-color, $text-overlay-opacity);
      color: $light-font-color;

      z-index: 4;

      visibility: hidden;
      opacity: 0;

      h3 {
        font: {
          size: 20px;
          weight: 700;
        }
      }
    }
  }

    &:hover {

    .flexbox-slide:hover {
      flex-shrink: 0;
      width: 80%;
    }
  }
}

/* effect  */
.flexbox-slider.flexbox-slider-1 {

  .flexbox-slide {

    .text-block {
      bottom: 60px;
    }
  }

  &:hover {

    .start {visibility:hidden}

    .flexbox-slide:hover {

      .text-block {
        @include transition-mix($delay: .5s);
        bottom: 30px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

.start {font-weight: bold; color: #fbaf17; font-size: 150%; z-index:1000;  padding: 45% 20%; 
}
img.panel-img {height:500px !important; }
.img-overlay {
  width: 100%;
  height: 100%;
  background: rgba(51,85,153,.9);
}

.flexbox-slide {border-right: dashed 4px gold;}
.flexbox-slide:last-child {border-right: 0px}

#accordion-expand, .slide-bottom {visibility: hidden}


@media (max-width:960px) {
  .flexbox-slider {
    flex-direction: column; 
    height: 200px;

    .flexbox-slide {
      margin: auto;
      width: 75%;
      height: 200px !important;
      transform: skewX(0deg);

    } 
    .flexbox-slide {border-right: none;}
  }
  #accordion-expand {float:right; visibility: visible}
  .start {margin: 0 20px; padding: 20px; border-bottom: solid 2px  gold;}
}

Вот мой кодовый блок

...