问题描述
我正在尝试使用箭头切换div；这是我到目前为止的代码：
$('.hide-show').hide();
$('.toggle-year').on('click',function() {
$(this).html($(this).text().substr(0,4) == 'Hide' ? '▼' : 'Hide ▲');
$('.hide-show').toggle('slow');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="toggle-year">▼</a>
<div class="hide-show">
Content comes here
</div>此示例工作正常，但需要文本Hide才能将箭头改回向下。如何删除文本Hide（仅箭头？）
解决方法
最简单的方法是删除所有不需要的文本，然后只比较当前文本是否等于向上或向下箭头：
// hides the text to be hidden on page-load:
$('.hide-show').hide();
// selects all elements matching the supplied CSS selector
// and binds the anonymous function of the on() method
// as the event-handler for the 'click' event:
$('.toggle-year').on('click',function() {
$(this).text(function(_,currentText) {
// _ is the index of the current element amongst
// all the elements retrieved in the jQuery collection;
// currentText is a reference to the current textContent
// of the current element from the jQuery collection.
// here we use a conditional operator to update the
// text of the current element. If the currentText is
// equal to '▼' then we change it to '▲' and if it
// is not equal to '▼' then we set it to '▼':
return currentText == "▼" ? "▲" : "▼";
});
// and then we toggle the visibility of the hidden
// element(s):
$('.hide-show').toggle('slow');
});/* we're using a <button> instead of an <a> as we're not
navigating to a new area of the website,so here we're
styling it to appear similar to an <a> (assuming that's
your preference): */
button.toggle-year {
border: 0;
background-color: inherit;
text-decoration: underline;
color: #00f;
outline: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- as mentioned in the CSS,above,because we're not using
the element for navigation but instead for functionality,I've replaced the <a> with a <button>: -->
<button class="toggle-year">▼</button>
<div class="hide-show">
Content comes here
</div>
当然，使用jQuery可以实现的任何事情都可以通过本机JavaScript类似地实现；考虑到这一点，以下显示了一种可以替代使用普通JavaScript的方法：
// I cache a reference to the document as 'D' because I'm lazy and don't want
// to type 'document' more than I have to:
const D = document,// here we define the toggleVisibility function,using Arrow function syntax
// since we don't really need a reference to 'this',and we get an indirect
// access via the Event Object passed from EventTarget.addEventListener()
// function later:
toggleVisibility = (e) => {
// e.target is the element that initiated the click action (in this
// instance e.currentTarget would also have worked):
const clicked = e.target,// caching a reference to the current textContent of that clicked
// element:
text = clicked.textContent,// caching a reference to the element(s) that we intend to show/hide:
elementsToHide = D.querySelectorAll('.hide-show'),// we're using this test in two places,so cache the result of the
// comparison/assessment:
shouldChange = text == '▼';
// iterating over the collection of elements we found earlier,using
// NodeList.protoype.forEach():
elementsToHide.forEach(
// again using an Arrow function syntax:
(el) => {
// if the shouldChange variable is true/truthy (in this case it's
// Boolean true,but it would also work with truthy/falsey values)
// we change the display of the current Node in the NodeList to
// 'block',otherwise if shouldChange is false then we set the
// display to 'none' in order to hide it:
el.style.display = shouldChange ? 'block' : 'none';
// here if shouldChange is true we update the text-content to
// '▲',otherwise we change it to '▼':
clicked.textContent = shouldChange ? '▲' : '▼';
});
},// here we retrieve the <button> elements with the class-name of 'toggle-year':
toggleButtons = D.querySelectorAll('button.toggle-year');
// and then use NodeList.prototype.forEach() to iterate over that collection:
toggleButtons.forEach(
// again,we use Arrow syntax and bind the toggleVisibility() function (but
// do note the deliberate lack of parentheses below) as the event-handler for
// the 'click' event:
(button) => button.addEventListener('click',toggleVisibility)
);button.toggle-year {
border: 0;
background-color: inherit;
text-decoration: underline;
color: #00f;
outline: 0;
}
.hide-show {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle-year">▼</button>
<div class="hide-show">
Content comes here
</div>
参考：
- JavaScript：
- jQuery：
另一个解决方案可以基于.charCodeAt()：
$('.hide-show').hide();
$('.toggle-year').on('click',function() {
var ntext = this.text.trim().charCodeAt(0) == '9650' ? '▼' : '▲'
$(this).html(ntext);
$('.hide-show').toggle('slow');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="toggle-year">▼</a>
<div class="hide-show">
Content comes here
</div>,
更清洁的方法是：
- 将每组可折叠内容包装在
<div class="collapsable">中
- 每次单击时，将
.active添加到该包装器div中。 - 将图标配置保留在CSS中
- 使用简单的三行javascript代码来切换活动类（jquery
toggleClass()函数）。
$('.collapsable button').click(function(){
$(this).parent().toggleClass('active');
});.collapsable button:after {
content: "▼";
}
.collapsable.active button:after {
content: "▲";
}
.collapsable:not(.active) .content{
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapsable">
<button></button>
<div class="content">
Content comes here
</div>
</div>,
第三个可能的解决方案是使用String.fromCharCode()（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode）进行比较
$('.hide-show').hide();
$('.toggle-year').on('click',function() {
$(this).html($(this).text() === String.fromCharCode(9660) ? '▲' : '▼');
$('.hide-show').toggle('slow');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="toggle-year">▼</a>
<div class="hide-show">
Content comes here
</div>