带有下拉箭头的JS按钮

Question

我的网站上目前有一些很大的按钮，用作内容的下拉菜单。单击时，div 会启用并显示我的内容，再次单击时内容会消失。我想在最右侧添加一个箭头（类似这样https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png）它让用户知道它是一个具有单击功能的按钮。如果可能的话，当内容下拉时，我希望箭头“翻转”，所以现在它是一个向上箭头。这是我的代码现在的样子。有谁知道如何做到这一点/实现这一点？

<div id="content">
        <div id=dropdowncenter>
        <button id="phonenumbers" onclick="toggle_visibility('phonenumberscontent');" >Phone Numbers</button>
        <div id="phonenumberscontent" style=display:none;>
           <p>THIS IS SOME CONTENT</p>
            </div>
        </div>
    </div>

javascript

   <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

CSS

   #dropdowncenter{
    text-align: center;
}

#phonenumbers{
    color:white;
    background-color:#009491;
    border:none;
    width:702px;
    height:50px;
}

#phonenumberscontent{
    width:700px;
    color:black;
    border:1px solid black;
    margin:-1px auto;
    padding:0;
    background-color: none;
    margin-bottom: 5px;
}

Answer 1

您可以尝试这样的操作（链接到JSFiddle）（这里我使用 HTML5 数据属性来指示按钮/内容是否打开/关闭）。

我稍微修改了一下，在按钮上添加了 data-toggle，在按钮下方的内容中添加了 data-state，以指示其打开和关闭状态。 另外，我还更改了

onclick

事件，现在每次单击都会根据单击的按钮查找内容并更改其数据属性。

为了显示箭头/三角形，我使用了伪元素“after”，并将箭头符号添加为 Unicode（我从here获取）

HTML：

<div id="content">
   <div id=dropdowncenter>
     <button id="phonenumbers" class="dropdown" data-toggle="off">Phone Numbers</button>
       <div id="phonenumberscontent" class="content" data-state="closed">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.
       </div>
   </div>
</div>

CSS：

#dropdowncenter {
   text-align: center;
}

#phonenumbers {
    color: white;
    background-color: #009491;
    border: none;
    width: 702px;
    height: 50px;
}

#phonenumberscontent {
    width: 700px;
    color: black;
    border: 1px solid black;
    margin: -1px auto;
    padding: 0;
    background-color: none;
    margin-bottom: 5px;
}
/* class for all dropdown buttons*/       
.dropdown {
    position: relative;
}

.content {
    display: none;
}

.content[data-state="open"] {
    display: block;
}

.dropdown:after {
    content: "\25BC";/*here you can add any image url / sign you want for arrow down*/
    position: absolute;
    right: 15px;
}

.dropdown[data-toggle="on"]:after {
    content: "\25B2";/*here you can add any image url / sign you want for arrow up*/
}

JS：

function toggle_visibility(e) {
  var content = e.target.nextElementSibling; /// content element that appears after button
  if (content.getAttribute("data-state") === "closed") { /// if content closed
    content.setAttribute("data-state", "open"); // open it
    e.target.setAttribute("data-toggle", "on"); /// change toggle on button
  } else {
    content.setAttribute("data-state", "closed"); /// close content
    e.target.setAttribute("data-toggle", "off"); /// change toggle on button
  }
}

var btns = document.querySelectorAll(".dropdown"); /// collect all buttons

for (var i = 0, len = btns.length; i < len; i++) {
   //// add event handler for click to all button
  btns[i].addEventListener("click", toggle_visibility);
}

如果您对上述解决方案还有任何疑问，请告诉我。

HTH.

Answer 2

我将这三个部分粘贴到相关位置（样式、脚本、正文），当绿色按钮和白色向下箭头出现时，任何地方的任何点击都没有反应。

我在JS中添加了一个警报：alert(btns.length);在 var btns 行之后，它返回 0（未找到）。 因此，没有点击事件的监听器。

想法？