如何僅使用 unicode 箭頭在 jquery 中切換 div

Question

我正在嘗試用箭頭切換 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">&#9660;</a> <div class="hide-show"> Content comes here </div>

此示例工作正常，但需要文本Hide將箭頭更改回向下。 我怎樣才能去掉文本Hide （所以只有箭頭？）

小提琴

Answer 1

最簡單的方法是刪除所有不需要的文本，然后只比較文本當前是否等於向上或向下箭頭：

 // 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">&#9660;</button> <div class="hide-show"> Content comes here </div>

JS小提琴演示。

任何可以用 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">&#9660;</button> <div class="hide-show"> Content comes here </div>

JS小提琴演示。

參考：

• JavaScript：
  • 箭頭函數。
  • 條件三元運算符（ assessment ? ifTrue : ifFalse ） 。
  • EventTarget.addEventListener() 。
  • Node.prototype.forEach() 。
  • Node.textContent 。
• jQuery：
  • on() 。
  • text() 。
  • toggle() 。

Answer 2

另一種解決方案可以基於.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">&#9660;</a> <div class="hide-show"> Content comes here </div>

Answer 3

更清潔的方法是：

• 將每組可折疊內容包裹在一個<div class="collapsable">
• 每次單擊時，向該包裝器 div 添加或刪除一個.active 。
• 將圖標配置保留在 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>

Answer 4

第三個可能的解決方案是使用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">&#9660;</a> <div class="hide-show"> Content comes here </div>