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 个答案，我想让它适用于所有人。

4

5 回答 5

2

最佳使用方式<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

于 2013-10-03T21:20:51.143 回答
0

JQuery accordian如果我正确理解了这个问题，您可以使用。标题可以代表问题，可扩展面板代表答案。

于 2013-10-03T21:00:10.240 回答
0

尝试这个：

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

小提琴

于 2013-10-03T21:03:54.543 回答
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，一旦点击事件发生，问题就会显示在上面。因为我提供的代码和可以回答您问题的代码将隐藏问题本身，而不会再次显示它！因此，请确保不会发生这种情况。:)

祝朋友好运，干杯！

于 2013-10-03T21:12:01.040 回答
0

这可能不是最短的方法，但根据我的经验，它始终是最健壮的方法 - 因为 jQueryhide()和show()基本上将属性display: none和display: block（分别）分配给它链接到的元素。toggle()就像两者结合，仍然只支持display: block。例如，如果您宁愿拥有display: inlineordisplay: 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's '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;
*/

在此示例中，为了简化，标记被剥离。工作小提琴。

于 2013-10-03T22:20:23.640 回答