此折叠代码运行良好,但我希望在用户单击链接执行取消折叠时返回相同的消息。
代码:
<div class="expandContent searchfont"><a href="#" title="Click here to search."> <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(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> -</span>`);
} else {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> FILTER SEARCH</span>`);
}
});
});
</script>
我所想要的是,当我使用点击过滤器搜索时,div取消折叠,消息应该是搜索候选者。
除了,一切都很好
$("#toggleText").text() === "SEARCH"
将由$("#toggleText").text() === " FILTER SEARCH"
更改- 如果文本为
filter search
,则下一个文本将在search candidate
中更改
$(document).ready(function() {
$(".expandContent").click(function() {
$(".showMe").slideToggle("slow");
if ($("#toggleText").text() === " FILTER SEARCH") {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i>SEARCH CANDIDATES<span id="toggleText"> -</span>`);
} else {
$(".expandContent a").html(`
<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."> <i class='icon-search' title='Click here to search.'></i> SEARCH CANDIDATES</a></div>
<div class="showMe" style="display:none">Below content</div>