Как скрыть div html?

<div class = "navigation-menu w-32 d-flex flex-row">
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div id = "more-hd more-vis"><i class = "fas fa-chevron-circle-down"></i></div>  
 </div>

Я пытаюсь скрыть последний Div. Я использую bootstrap. Итак, d-none не помогает, в css #more-hd display:none тоже, с JS document.getElementById("more-hd").style.display = "none" тоже. Он всегда виден .. Я также пробовал сначала с ul> li .. ничего случается

Вы пробовали метод JQuery Hide. ??

— 05.05.2018 09:26

В элементе не может быть нескольких идентификаторов. Идентификатор - more-hd more-vis, а не more-hd.

— 05.05.2018 09:26

javascript html css

05.05.2018 09:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

9 317

Ответы 5

Используйте display: none !important; для последнего div, добавьте класс в последний div и используйте этот css в этом классе. Использование !important переопределит CSS, который уже был применен к этому div. У вас также есть несколько id, это плохая практика, поэтому используйте там один идентификатор.

.lastDiv{
  display: none !important;
}

<div class = "navigation-menu w-32 d-flex flex-row">
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div id = "more-hd more-vis" class='lastDiv'>SomeContent<i class = "fas fa-chevron-circle-down"></i></div>  
</div>

Если вы хотите использовать id, используйте одно значение id с этим кодом:

#more-hd{
  display: none !important;
}

<div class = "navigation-menu w-32 d-flex flex-row">
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div id = "more-hd" class='lastDiv'>SomeContent<i class = "fas fa-chevron-circle-down"></i></div>  
</div>

У вас также есть опция для селектора last-child в css, чтобы убедиться, что независимо от того, какой id или class предназначен для последнего div внутри класса navigation-menu, он всегда скрыт:

.navigation-menu div:last-child{
  display: none !important;
}

<div class = "navigation-menu w-32 d-flex flex-row">
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div class = "visible"><a href = "#">Раздел1</a></div>
          <div id = "more-hd more-vis" class='lastDiv'>SomeContent<i class = "fas fa-chevron-circle-down"></i></div>  
</div>

05.05.2018 09:28

У вас не может быть места в id. Если вы хотите разместить CSS на #more-hd, он должен быть

id = "more-hd"

нет

id = "more-hd more-vis"

Если вам нужно несколько способов ссылаться на элемент, используйте классы для дополнительных. У него может быть только один идентификатор.

05.05.2018 09:28

.navigation-menu .fa-chevron-circle-down{
		display: none;
	}

<div class = "navigation-menu w-32 d-flex flex-row">
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div id = "more-hd more-vis"><i class = "fas fa-chevron-circle-down">Test for hide</i></div>  
 </div>

05.05.2018 09:30

вы также используете :last-child

NOTE: ID is always unique. so there is no meaning of two id

.navigation-menu div:last-child {
display: none !important;
}

<div class = "navigation-menu w-32 d-flex flex-row">
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div class = "visible"><a href = "#">Раздел1</a></div>
   <div id = "more-hd"><i class = "fas fa-chevron-circle-down"></i>test</div>  
 </div>

05.05.2018 09:31

Пожалуйста, примените этот CSS.

.navigation-menu div:last-child {
    display: none;
}

05.05.2018 10:43

Другие вопросы по теме

Отображать значок информации, встроенный в ion-item

Как получить ближайшее текстовое значение типа ввода в javascript?

Как добавить несколько элементов в div?

Различное поведение в разных браузерах для события oninput во время типа ввода

Невозможно вставить данные в mysql с помощью php

Фокус не работает с флекс-боксом

JQuery работает после второго щелчка, а затем продолжает работать нормально

Последняя версия Firefox и проблема Chrome с javascript

Автозаполнение = новый-пароль и их подтверждение путем повторного ввода пароля

Прокрутка дочернего div в родительском div

Как скрыть div html?

Ответы 5

Другие вопросы по теме

Похожие вопросы