-1
jQueryを使用してドロップダウンアコーディオンメニューを作成しています。 以前はいくつかのバージョンで作業していましたが、イメージの切り替えを追加する前にスクリプトをうまく動作させることができます。jQueryがテキストと画像を切り替えません。
イメージトグルスクリプトを追加した後は、トグル全体がうまく機能していません。
$(function() {
$('.showmore').click(
function() {
$(this).closest("div").next(".dropdown").toggle();
$(this).find('i').toggleClass('arrow-down arrow-up');
if ($(this).text() == "Show") {
$(this).text("Hide");
} else {
$(this).text("Show");
}
$(this).closest("div").next(".dropdown").toggleClass('selected');
}
)
}).title {
background-color: #CCCCCC;
}
.sprite {
background-image: url(https://image.ibb.co/bHTF8R/pinkarrow.png);
background-repeat: no-repeat;
display: block;
}
.arrow-down {
width: 9px;
height: 6px;
background-position: -9px 0;
}
.arrow-up {
width: 9px;
height: 6px;
background-position: 0 0;
}
.arrow-down,
.arrow-up {
display: inline-block;
padding-left: 5px;
}
.dropdown {
display: none;
}
.selected {
border: 4px solid #CCCCCC;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="content">
<div class="title">
<span class="showmore">Show<i class="sprite arrow-down"></i></span>
</div>
<!--End of class Title-->
<div class="dropdown">
XXXXXXXXXX Content XXXXXXXXXX
</div>
</div>だから、私は何をしたいということです。もともと内容はタイトル下矢印アイコンが表示されていると、「ショー」で、非表示になります。タイトルをクリックすると、非表示のコンテンツが表示され、タイトルが「非表示」に変わり、矢印の上にアイコンが表示されます。
元々私はこれらのテキストでトグルを達成することができますが、イメージトグルスクリプトを追加しようとすると、それは機能しません。
$(this).find('i').toggleClass('arrow-down arrow-up');
誰でもあなたの意見や意見を交換することができますか？私の質問を読んでいただきありがとうございました！
フィドルは素晴らしいですが、すべての関連するコードを質問に入れてください。 jsFiddleがダウンすると、あなたの質問は答えられないでしょう。問題については、私が質問に編集したスニペットを実行して「表示」をクリックすると、かなり明らかになるようです... –
ブラウザのコンソールにエラーメッセージが表示されます。 – David
@RoryMcCrossanあなたの編集と懸念に感謝します。私は本当にあなたのような良い方法でここにコードを配置する方法ではないので、私はちょうどjsFiddleを使用しました。ご報告いただきありがとうございます。 – Sammi