jQuery & CSS - Видалити / Додати дисплей: немає

У мене є діва з цим класом:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

І я хотів би, щоб деякими методами jQuery видалити цей дисплей: жоден; (так показать div) і, ніж додати його ще раз (так div буде затінювати).

Як я можу це зробити? Ура

Щоб приховати div

$('.news').hide();

або

$('.news').css('display','none');

і показати div:

$('.news').show();

або

$('.news').css('display','block');

jQuery надає вам:

$(".news").hide();
$(".news").show();

Потім ви можете легко показати та приховати елементи.

Отже, дозвольте надати вам зразок коду:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

Посилання стане тригером для показу діва при натисканні на нього. Тож ваш Javascript буде:

$('.trigger').click(function() {
   $('.news').toggle();
});

Вам майже завжди краще дозволити jQuery обробляти стилі для приховування та показу елементів.

Редагувати: я бачу, що люди вище рекомендують використовувати .showі .hideдля цього. .toggleдозволяє зробити обидва лише одним ефектом. Так це круто.

У JavaScript:

getElementById("id").style.display = null;

У jQuery:

$("#id").css("display","");

Використовуйте перемикач, щоб показати та приховати.

$('#mydiv').toggle()

Перевірте приклад роботи на веб-сайті http://jsfiddle.net/jNqTa/

Я б запропонував додати клас для відображення / приховування елементів:

.hide { display:none; }

а потім скористайтеся .toggleClass () jquery для показу / приховування елемента:

$(".news").toggleClass("hide");

Єдиний спосіб видалити вбудований "display: none" через css-api jQuery - це скинути його із порожнього рядка (null НЕ працює btw !!).

Згідно з документом jQuery, це загальний спосіб "видалити" колись задане властивість стилю inline.

$("#mydiv").css("display","");

або

$("#mydiv").css({display:""});

повинні виконати трюк належним чином.

У IMHO у jQuery відсутній метод, який можна назвати "не сховати" або "виявити", який замість того, щоб просто встановити інше властивість стилю вбудованої форми, скасовує значення відображення належним чином, як описано вище. Або, можливо, hide()слід зберігати початкове вбудоване значення і show()відновити це ...

Функції jQuery .show () та .hide () - це, мабуть, найкраща пропозиція.

Ви не даєте нам багато інформації, але загалом це може бути рішенням:

$("div.news").css("display", "block");

Чомусь перемикання не працювало для мене, і я отримав помилку uncaught type error toggle is not a functionпід час огляду елемента в браузері. Тому я використав наступний код, і він почав працювати для мене.

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

Використовується файл сценарію jquery jquery-2.1.3.min.js.

Якщо у вас є багато елементів, які ви хотіли б, .hide()або .show()ви збираєтесь витрачати багато ресурсів, щоб робити те, що хочете - навіть якщо використовувати .hide(0)або .show(0)- параметр 0 - тривалість анімації.

На відміну від Prototype.js .hide() та .show()методів, які використовуються лише для маніпулювання атрибутом відображення елемента, реалізація jQuery є більш складною і не рекомендується для великої кількості елементів.

У цьому випадку вам, мабуть, слід спробувати .css('display','none')сховатися і .css('display','')показати

.css('display','block') слід уникати, особливо якщо ви працюєте з вбудованими елементами, рядками таблиці (насправді будь-якими елементами таблиці) тощо.

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

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Замініть вбудований блок на обраний вами бажаний метод відображення та використовуйте jquerys addclass https://api.jquery.com/addclass/ та deleteclass https://api.jquery.com/removeclass/ замість показ / приховування, якщо назад сумісність - це не проблема, ви можете використовувати такі атрибути.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

І використовуйте jquerys attr () http://api.jquery.com/attr/, щоб показати та приховати елемент.

Незалежно від способу, який ви віддаєте перевагу, він дозволяє легко реалізувати анімацію css3, показуючи / приховуючи елементи таким чином

Використання show()добавок, display:blockзамість display:hideяких може порушити справи.

Щоб уникнути цього, ви можете мати клас із властивістю display:noneта перемикати цей клас із цим елементом toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

Жодна з відповідей про це не згадувала.