1
このJSFiddleに表示されるコンテンツの基本的な表示/非表示切り替えがあります。その仕事はすばらしく、私はそれが必要なのです。別のページからdivに固定するときにテキストを切り替える
しかし、私がやっていることは、別のページからこれらのdivに固定して、表示する回答divをトリガーすることです。私は以下のコードでうまく動作していますが、上記の手動切り替えに影響を与えることなく、別のページから来たときにテキストを閉じる(これも切り替える)に変更するのに苦労しています。
私はいくつかのことを試しましたが、正しく動作していなかったので、私のコードを元に戻して、うまくはっきりとわかりました。私が抱えていた主な問題の1つは、ページ上の同じクラスのすべての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();
});
いくつかのHTMLコードを投稿できますか? –
jsフィドルではHTMLが、ここでもそれを置いています。ありがとう – probablybest