Дисплей против видимости - PullRequest
Новая
       56

Дисплей против видимости

0 голосов
/ 07 марта 2020

На одной из моих страниц у меня может быть две ситуации.

Первая, если событие не найдено 

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
        <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        No event found!    </div>
</div>

или это, если хотя бы событие найдено 

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
      <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
        <div class="mec-wrap colorskin-custom">
    <div class="mec-event-list-minimal">
            <article data-style="" class="mec-event-article mec-clear  mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
    </article>
                        </div>
</div>
        <div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
        Nessun evento trovato!    </div>
    </div>

Мне нужно спрятать первую ситуацию, я не вижу «События не найдены». Я нашел решение с помощью css. Это работает нормально, но если я использую дисплей вместо видимости, код не будет работать. Хорошо работает «display: none», но я не могу заставить его снова появиться в структуре, если событие найдено. Я пробовал каждое значение для «отображения» (блок, гибкий, и т. Д. c. И т. Д. c.) Никто не работает

https://codepen.io/MarcoRM69/pen/VwLrXWb

.mec-skin-list-events-container {  
visibility:hidden;  
}
.mec-skin-list-events-container > div {
  visibility:visible;
}

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 07 марта 2020

Современные браузеры еще не реализовали has() псевдокласс , к сожалению.

Вы можете легко это сделать с помощью JavaScript или библиотеки, такой как jQuery, вместо использования CSS. jQuery агрегат :has() селектор .

Описание: выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору. Выражение $( "div:has(p)" ) соответствует <div>, если <p> существует где-то среди его потомков, а не просто как прямой потомок. 

$('.mec-skin-list-events-container').addClass("d-none");
$('.mec-skin-list-events-container:has(div)').addClass("d-block");
body {
  color: green;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.mec-skin-list-events-container+div:not(:has(div)) {
  color: black;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
  <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
    Nessun evento trovato! </div>
</div>

<hr>

<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
  <div class="mec-skin-list-events-container" id="mec_skin_events_1210">
    <div class="mec-wrap colorskin-custom">
      <div class="mec-event-list-minimal">
        <article data-style="" class="mec-event-article mec-clear  mec-divider-toggle mec-toggle-202003-1210" itemscope="">
          ARTICLE HERE
        </article>
      </div>
    </div>
    <div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
      Nessun evento trovato! </div>
  </div>
</div>
0 голосов
/ 07 марта 2020

display: none... не работает, а visibility:hidden... работает, потому что display: none удаляет затронутый элемент со страницы, а visibility:hidden - нет.

Поскольку display:none удаляет содержащий div, вы не может затем попросить отобразить содержащийся div.

Из вашего кодекса: 

.mec-skin-list-events-container {  
  visibility:hidden; 
  /*display:none;*/

}
.mec-skin-list-events-container > div {
  visibility:visible;
  /*display:block;*/  
}
...