Question

我想处理几个在开发阶段需要特定功能的元素，用于打开和关闭div的类似切换按钮。我说切换式，因为它不是你的标准切换设置。

我已经为单个按钮和容器实例工作的代码。现在我需要学习如何将其应用于十几个应该相互独立的功能。

这个小提琴显示了四个例子，其中第一个CSS按钮是唯一正在工作的按钮。

这是创建单个块的工作示例的代码 - 两个按钮和我们的div - 它应该可用于其他几个按钮/ div区域。

HTML

<a class="button" id="open">Open</a>

<div id="click-drop" style="display:none">

<h2>Hello World</h2>
<p>You can see me! I'm open! Type your code below.</p>
<textarea></textarea>
<p><a class="button" id="close" style="display:none">Close</a></p>

</div>

的Javascript

var open = document.getElementById("open");
var close = document.getElementById("close");

function show(target) {
    document.getElementById(target).style.display = 'block';
}
function hide(target) {
    document.getElementById(target).style.display = 'none';
}
function hideButton() {
    var x = document.getElementById("open");
    x.style.display = "none";
    var x = document.getElementById("close");
    x.style.display = "";
}
function showButton() {
    var x = document.getElementById("open");
    x.style.display = "";
    var x = document.getElementById("close");
    x.style.display = "none";
}
open.onclick = function() {show('click-drop');hideButton()}
close.onclick = function() {hide('click-drop');showButton()

我想要一些干净，简洁和不引人注目的东西。

Answer 1

此演示是纯JavaScript，因为它在标记中显示，并由问题中提供的代码暗示。它只有只有一个eventListener和多个event.targets BTW，唯一ID只能赋予一个元素。 您不能拥有多个具有相同值的ID 。所以你会注意到我只使用了没有id的类。

<强>优点

纯JavaScript，不依赖插件。
使用现代浏览器进行跨浏览。
必须只使用一个eventListener才能提高内存效率。
它确定在没有创建数组的情况下确切地单击了哪个按钮，或者NodeList在循环中迭代。

<强>缺点

如果您需要与IE9兼容，则classList必须替换为className。
HTML布局必须严格模式。关键元素必须按预定顺序定位。如果您习惯在标记中制作有组织的模式，那就没什么问题了。

在源代码中对逐步说明进行了评论。

FIDDLE

<强>段

// Reference the parent element

var box = document.querySelector('.box');
// add an eventListener to parent

box.addEventListener('click', toggleBtn, false);

function toggleBtn(event) {
  /* This will prevent the <a>nchors from 
   behaving like normal anchors which
   jump from one location to another
  */
  event.preventDefault();
  // event.target is the element that was clicked (.open/.close .button)
  // event.currentTarget is the element that listens for an event (.box)

  if (event.target != event.currentTarget) {
    var clicked = event.target;

    /* If the clicked element has .open class
     find the sibling element that was before it and
     show it by adding .show class and removing .hide
     Then hide clicked element.
    */
    if (clicked.classList.contains('open')) {
      var drop = clicked.previousElementSibling;
      drop.classList.remove('hide');
      drop.classList.add('show');
      clicked.classList.remove('show');
      clicked.classList.add('hide');
    } else {
      /* Else find clicked parent and hide it
       and then show the parent's sibling that is after it.
      */
      var drop = clicked.parentElement;
      var open = drop.nextElementSibling;
      drop.classList.remove('show');
      drop.classList.add('hide');
      open.classList.remove('hide');
      open.classList.add('show');
    }
  }
  /* This prevents the bubbling phase from continuing
   up the event chain and triggering any unnecessary
   eventListeners
  */
  event.stopPropagation();
}

* {
  /* Prefix no longer needed */
  box-sizing: border-box;
}
.box {
  /* Just for demo */
  border: 1px dashed red;
}
.button {
  text-decoration: none;
  font-size: 13px;
  line-height: 26px;
  height: 28px;
  width: 48px;
  margin: 0;
  padding: 1px;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  -webkit-appearance: none;
  /* Prefix no longer needed for years */
  border-radius: 3px;
  text-align: center;
}
.click-drop {
  border: solid 1px;
  border-radius: 3px;
  padding: 10px 25px;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.button.show {
  display: inline-block;
}
.close {
  display: block;
}

<!--[The order in which elements are positioned is important which will be evident when you review the JavaScript]-->

<!--.box is the 'ancestor/parent' element and event.currentTarget-->

<section class="box">
  <h1>Header Content</h1>
  <!--Each .click-drop is initially hidden hence it has .hide as a class as well-->

  <div class="click-drop hide">
    <!--All descendants/children of each .click-drop inherits display:none prop/val from .click-drop.hide-->

    <p>Header style</p>
    <textarea></textarea>
    <a class="close button">Close</a>
  </div>
  <!--Each .open.button follows it's corresponding .click-drop-->

  <a class="open button show">CSS</a>


  <div class="click-drop hide">
    <p>Header content</p>
    <textarea></textarea>
    <a class="close button">Close</a>
  </div>
  <a class="open button show">HTML</a>

  <h1>Footer Content</h1>

  <div class="click-drop hide">
    <p>Footer style</p>
    <textarea></textarea>
    <a class="close button">Close</a>
  </div>
  <a class="open button show">CSS</a>


  <div class="click-drop hide">
    <p>Footer content</p>
    <textarea></textarea>
    <a class="close button">Close</a>
  </div>
  <a class="open button show">HTML</a>

</section>

Answer 2

让我们解释一些问题：

HTML中的ID，在页面中，应该是唯一的。
使用类和jQuery可以非常轻松地实现这一目标。
我在所有＆＃34;打开按钮+相应的区域＆＃34;上添加了一个跨度。我设置了一个＆＃34;区域＆＃34;类
我把＆＃34;打开＆＃34;所有开放链接的课程。
我把＆＃34;关闭＆＃34;所有关闭链接的课程。
我注册了＆＃39; .zone。打开＆＃39;因此，他们隐藏自己并在父母身上显示所包含的DIV。
我注册了点击＆＃39; .zone。关闭＆＃39;因此，他们将DIV隐藏在＆＃39; .zone＆＃39;包含它们的元素并显示＆＃39; .open＆＃39;链接在他们之下。

所以这就是我所做的： https://jsfiddle.net/e2fexbqp/13/

＆＃13;

$(document).ready(function() {
	$('.zone .open').click(function() {
  	$(this).hide();
    $(this).parent().find('div').show();
  });
  $('.zone .close').click(function() {
  	var parent = $(this).parents('.zone');
  	parent.children('div').hide();
    parent.children('a.open').show();
  });
});

＆＃13;

.button {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 26px;
    height: 28px;
    margin: 0;
    padding: 0 10px 1px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.zone div {
    border: solid 1px;
    border-radius: 3px;
    padding: 10px 25px;
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Header Content</h1>

<span class="zone">
<a class="button open">CSS</a>

<div>
                    
<p>Header style</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
				
</div>
</span>

<span class="zone">
<a class="button open">HTML</a>

<div>
<p>Header content</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
				
</div>
</span>
<h1>Footer Content</h1>
<span class="zone">
<a class="button open">CSS</a>

<div>
                    
<p>Footer style</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
				
</div>	
</span><span class="zone">
<a class="button open">HTML</a>

<div>
                    
<p>Footer content</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
				
</div>
</span>

＆＃13;

Answer 3

使用事件目标来设置单击的单个元素的样式。

anchors = doc.getElementsByClassName("button");
for (var i = 0; i < anchors.length; i++) {    
    anchors[i].addEventListener("click", function(e){
        e.target.classList.toggle('hide');
    });
}

使用javascript多个元素

3 个答案: