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数据属性来指示按钮/内容是否打开/关闭）。

我稍微修改了一下，将数据切换添加到按钮，将数据状态添加到按钮下方的内容，以指示其打开和关闭状态。此外，我已更改onclick事件，现在每次点击都会根据点击的按钮查找内容并更改其数据属性。

为了显示箭头/三角形，我使用了伪元素＆＃34;＆＃34;并添加到其内容箭头符号为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。

JS按钮带下拉箭头

1 个答案: