将链接取消折叠回默认文本



此折叠代码运行良好,但我希望在用户单击链接执行取消折叠时返回相同的消息。

代码:

<div class="expandContent searchfont"><a href="#" title="Click here to search."> &nbsp; &nbsp; <i class='icon-search' title='Click here to search.'></i> SEARCH CANDIDATES</a></div>
<div class="showMe" style="display:none">
<script type="text/javascript">
$(document).ready(function() {
$(".expandContent").click(function() {
$(".showMe").slideToggle("slow");
if ($("#toggleText").text() === "SEARCH") {
$(".expandContent a").html(` &nbsp; &nbsp;
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> &#45;</span>`);
} else {
$(".expandContent a").html(` &nbsp; &nbsp;
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> FILTER SEARCH</span>`);
}
});
});
</script>

我所想要的是,当我使用点击过滤器搜索时,div取消折叠,消息应该是搜索候选者。

除了,一切都很好

  1. $("#toggleText").text() === "SEARCH"将由$("#toggleText").text() === " FILTER SEARCH"更改
  2. 如果文本为filter search,则下一个文本将在search candidate中更改

$(document).ready(function() {
$(".expandContent").click(function() {
$(".showMe").slideToggle("slow");
if ($("#toggleText").text() === " FILTER SEARCH") {
$(".expandContent a").html(` &nbsp; &nbsp;
<i class="icon-search" title="Click here to search."></i>SEARCH CANDIDATES<span id="toggleText"> &#45;</span>`);
} else {
$(".expandContent a").html(` &nbsp; &nbsp;
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> FILTER SEARCH</span>`);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expandContent searchfont"><a href="#" title="Click here to search."> &nbsp; &nbsp; <i class='icon-search' title='Click here to search.'></i> SEARCH CANDIDATES</a></div>
<div class="showMe" style="display:none">Below content</div>

最新更新