JQuery показать / скрыть FAQ

Question

JQuery показать / скрыть FAQ

0

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

Мой код HTML:

<div class="faqSectionFirst">
Question?

<p class="faqTextFirst" style='text-align:justify'>
<span>
Some text.
</span>
</p>
</div>

Мой JS-код:

$('.faqSectionFirst').on("click", function(){

if( $('.faqSectionFirst').index(this) ) {
    $('p.faqTextFirst').show();
} else {
    $('p.faqTextFirst').hide();
}
}
);

Кто-нибудь может мне помочь? Это не работает. У меня 20 вопросов, с 20 ответами, и я бы хотел, чтобы это работало для всех.

subrui 03 окт. 2013, в 22:59

Источник

1

Вы хотите, чтобы он вел себя как аккордеон (только один открытый за раз) или несколько могут быть открыты?
Chris Rockwell 03 окт. 2013, в 21:00

Теги:

javascript

jquery

5 ответов

1

Лучший способ использовать <dd><dt>

HTML

<dl >
    <dt>Question 1?</dt>
    <dd>Answer of Question 1.</dd>
    <dt>Question 2?</dt>
    <dd>Answer of Question 2.</dd> 
</dl>

CSS

dd { display:none; }
dt { padding:4px; font:bold 13px verdana;cursor:pointer;}

JQuery

$(document).on('click','dt', function() {
    var myDD = $(this).next('dd');
    $('dd').slideUp();
    myDD.slideToggle();
});

Working Example

diEcho 03 окт. 2013, в 19:06

0

Это может быть не самый короткий подход, но по моему опыту он всегда будет самым надежным - потому что jQuery hide() и show() в основном назначают display: none свойств display: none и display: block (соответственно) к элементу, который он цепью к. toggle() похож на комбинированный, все еще поддерживающий только display: block. Это может привести к нежелательным результатам, если вы предпочитаете display: inline или display: inline-block вместо display: block.

Поэтому мой совет: всегда используйте классы для управления CSS, а не JavaScript. Это обеспечит вам полный контроль над вашим стилем. Следующий пример будет работать хорошо:

HTML

<a class="click-trigger" href="#"></a>
<div class="element"></div>

JavaScript

var c = $('.click-trigger');
var e = $('.element');
c.click(function() {
    if (e.hasClass('hidden')) {
        e.removeClass('hidden').addClass('show');
    } else {
        e.removeClass('shown').addClass('hidden');
    }
});

CSS

.click-trigger,
.element { height: 20px; width: 20px; }
.click-trigger { background-color: red; display: block; }
.element { background-color: blue; }

.hidden { display: none; }
.shown { display: block; }

/*
display alternatives not supported by jQuery 'show()' nor 'toggle()':

display: inline;
display: inline-block;
display: list-item;
display: flex;
display: inline-flex;
display: table;
display: inline-table;
display: table-row-group;
display: table-column;
display: table-column-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-caption;
*/

В этом примере разметка была удалена для упрощения. Рабочая скрипка.

Wallace Sidhrée 03 окт. 2013, в 20:23

0

Вы можете использовать JQuery accordian, если я правильно понял проблему. Заголовки могут представлять вопросы, ответы на которые расширяются.

christiandev 03 окт. 2013, в 18:31

0

Ваш код:

<div class="faqSectionFirst">
  Question?
 <p class="faqTextFirst" style='text-align:justify'>
  <span>
   Some text.
  </span>
 </p>
</div>

Решение:

Теперь, если вы хотите полностью скрыть вопрос, вы можете использовать этот код jquery:

$('.faqSectionFirst').click(function () {
 $(this).toggle();
});

this гарантирует, что только элемент, на котором произошло событие, будет скрыт или показан. И toggle() - это метод, чтобы скрыть или показать его. У вас должна быть определенная версия jQuery, чтобы заставить их работать.

Прочитай это:

Еще кое-что. У вас должен быть отдельный div, на котором однажды происходит событие щелчка, вопрос должен быть показан. Потому что код, который я предоставляю, и код, который будет отвечать на ваш вопрос, скроет сам вопрос, не оставляя никаких изменений, чтобы показать его снова! Поэтому убедитесь, что этого не происходит. :)

Приятель удачи, Привет!

Afzaal Ahmad Zeeshan 03 окт. 2013, в 18:28

Ещё вопросы

Вы хотите, чтобы он вел себя как аккордеон (только один открытый за раз) или несколько могут быть открыты?

user1320635 · Accepted Answer · 2013-10-03T18-15-00.000Z

Попробуй это:

$('.faqSectionFirst').on("click", function () {
    $('p.faqTextFirst', this).toggle();
});

скрипка

Это работает, спасибо! но как мне спрятать до клика и показывать только после клика?
Добавьте это выше (см. Ссылку выше): $ ('. FaqSectionFirst p.faqTextFirst'). Each (function () {$ (this) .hide ();});