我有一个基本的节目并隐藏了一些内容的切换,你可以在这个JSFiddle中看到。它工作得很好,做我需要做的事。
然而,我也在做的是从另一个页面锚定到这些div并触发显示的答案div。我使用下面的代码让这个工作得很好,但是当你来自另一个页面时,我很难让文本更改为关闭答案(也会切换),而不会影响上面提到的手动切换。
我尝试了一些事情,但它没有正常工作,所以我把代码剥离了,以便更加清晰。我遇到的一个主要问题是只更改特定div的文本,而不是影响页面上所有具有相同类的div。
以下代码:
<div id="anchorid1" class="question__wrapper">
<div class="question__item">
<p>
What sort of question am i one?
</p>
<div class="view__answer">
<div class="view__answer-btn">View Answer</div>
</div>
</div>
<div class="answer__wrapper">
<div class="answer__item"> I'm the answer that is hidden</div>
</div>
</div>
<div id="anchorid2" class="question__wrapper">
<div class="question__item">
<p>
What sort of question am i two?
</p>
<div class="view__answer">
<div class="view__answer-btn">View Answer</div>
</div>
</div>
<div class="answer__wrapper">
<div class="answer__item"> I'm the answer that is hidden</div>
</div>
</div>
$(document).ready(function () {
$('.view__answer-btn').on('click', function(e){
$(e.target).parents().next('.answer__wrapper').slideToggle(500, function () {});
$(e.target).toggleClass('open');
if ($(e.target).hasClass( 'open' )) {
$(this).html('Close Answer');
} else {
$(this).html('View Answer');
}
});
});
$(function() {
var anc = window.location.href.split('#')[1];
$('#' + anc + '.question__wrapper').find('.answer__wrapper').show();
});
答案 0 :(得分:1)
也许这会奏效!原谅愚蠢的缩进。
$(function() {
var anc = window.location.href.split('#')[1];
$('#' + anc + '.question__wrapper').find('.answer__wrapper')
.show()
.prev().find('.view__answer-btn')
.addClass('open')
.html('Close Answer');
});