是否可以使用替换的 div 来启动功能？答案

【问题标题】：Is it possible to use replaced divs to start a function?是否可以使用替换的 div 来启动功能？
【发布时间】：2016-01-26 20:38:35
【问题描述】：

如果您在这里查看开发站点：www.tmwlsh.co.uk/wlsh 你会看到有四个盒子。一旦你点击向下每个框中的箭头，箭头变为向上箭头。箭头的变化都是在 jQuery 中完成的，而 'up arrow div' 在 html 中本质上是不存在的。

一旦箭头变为向下，我希望用户能够单击向上箭头以重新隐藏 div。这有点令人困惑，但如果您查看链接，我相信您会得到要点。 www.tmwlsh.co.uk/wlsh

【问题讨论】：

欢迎来到 Stack Overflow！请在您的问题中包含代码的相关部分，并提及您已经尝试过的内容。
嗯，基本上你想要一个所谓的“手风琴”菜单。我查看了你的 JS，它非常多余，你可以用更优雅的代码实现你想要的功能。在这里查看示例：codepen.io/search/…

标签： javascript jquery slidedown slideup replacewith

【解决方案1】：

您要查找的可能是 jQuery 函数 Toggle。

您可以在此链接上找到它：http://api.jquery.com/toggle/

【讨论】：

【解决方案2】：

我会使用类和 jQuery 来完成这个。对于你的箭头，给它一个标准的背景图像，箭头指向下方。每次单击它时，将它的类切换为“活动”，对于活动类，给它一个带有向上箭头的背景图像。完成此操作后，您可以使用 jquery 切换相关框的扩展。例如;

// CSS
.arrow{background-image: url('downexample.png');}
.arrow.active{background-image: url('upexample.png');}

// jQuery
$('#arrow1').click(function(){
  $(this).toggleClass('active'); // toggle arrow direction
  $('#box1').toggleSlide(); // toggle expansion of the first box
})

【讨论】：

【解决方案3】：

我已经用一个按钮做了类似的事情，点击时会更改文本并显示一个 div，然后再次隐藏 div 并将按钮文本更改回来。这是我所做的代码，因为我不知道您所做的任何事情，您必须使用我的代码来适应您的代码，下次向我们展示您的代码可能是个好主意。

 function showInfo(){
                     var divInfo = document.getElementById("colorInfo");
                     var btnInfo = document.getElementById("btnInfo");
                     if(divInfo.style.display == "none"){
                         divInfo.style.display="block";
                         btnInfo.textContent = "Hide Color Info";
                     }else{
                         divInfo.style.display="none";
                         btnInfo.textContent = "Show Color Info";
                     }
                }

【讨论】：