Question

我正在尝试使用类“ .toggle”和“ .toggle-content”创建一个切换组件。

我希望能够调用切换类并在其后显示/隐藏切换内容类。我不希望将带切换内容类的元素放在带切换类的元素之后，所以我为它创建了getNextSibling（），使其从.toggle开始，然后转到下一个同级，查看是否具有内容切换类。

因此，我在下面提供的代码仅在具有一个类（即.toggle或.toggle-class）的情况下才对元素起作用。如果我包含一个名为“ .red”的类，则该切换将不起作用。由于我仍在学习Javascript，因此我不确定如何解决这个问题。

我正在尝试保留这种纯Javascript（没有jQuery或其他库）。任何帮助将不胜感激！

HTML：

//Regular toggle
<div class="container">
  <div class="toggle">Toggle This Dropdown</div>
  <div class="toggle-content" style="display:none">
    <ul>
      <li><a href="#">How To Do This</a></li>
      <li><a href="#">Installing in The Mid 90s</a></li>
    </ul>
</div>

//If toggle class is applied to <h2> and next sibling is 
//NOT toggle-content
<div class="container">
  <h2 class="toggle">Click This Dropdown 2</h2>
  <p>Some random text between the toggle and toggle-content</p>
  <ul class="toggle-content" style="display:none">
      <li><a href="#">Boop</a></li>
      <li><a href="#">Bop</a></li>
  </ul>
</div>

//If the toggle class is applied to <p> and has a red class
<div class="container">
  <p class="toggle red">Click This Dropdown 3</p>
  <ul class="toggle-content" style="display:none">
      <li><a href="#">Heyo</a></li>
      <li><a href="#">Hiya</a></li>
  </ul>
</div>

用于检测下一个兄弟是否为切换内容类的Javascript

    var getNextSibling = function (elem, selector) {

    // Get the next sibling element
    var sibling = elem.nextElementSibling;

    // If there's no selector, return the first sibling
    if (!selector) return sibling;

    // If the sibling matches our selector, use it
    // If not, jump to the next sibling and continue the loop
    while (sibling) {
        if (sibling.matches(selector)) return sibling;
        sibling = sibling.nextElementSibling;
    }
};

function toggleDocs(event) {

    if (event.target && event.target.className == 'toggle') {

        var toggleContent = getNextSibling(event.target, '.toggle-content');

        if (toggleContent.style.display == "none") {
        toggleContent.style.display = "block";

        } else {
            toggleContent.style.display = "none";
        }
    }
}

document.addEventListener('click', toggleDocs, true);

CSS

.toggle {
   cursor:pointer;
}
.toggle:hover {
    color:#515151;
}

.red { color: red; }

Answer 1

我将event.target.className ==更改为 event.target.className.indexOf（“ toggle”）

希望这会有所帮助。

    var getNextSibling = function (elem, selector) {

    // Get the next sibling element
    var sibling = elem.nextElementSibling;

    // If there's no selector, return the first sibling
    if (!selector) return sibling;

    // If the sibling matches our selector, use it
    // If not, jump to the next sibling and continue the loop
    while (sibling) {
        if (sibling.matches(selector)) return sibling;
        sibling = sibling.nextElementSibling;
    }
};

function toggleDocs(event) {
    if (event.target && event.target.className.indexOf('toggle') >= 0) {

        var toggleContent = getNextSibling(event.target, '.toggle-content');

        if (toggleContent.style.display == "none") {
        toggleContent.style.display = "block";

        } else {
            toggleContent.style.display = "none";
        }
    }
}

document.addEventListener('click', toggleDocs, true);

.toggle {
   cursor:pointer;
}
.toggle:hover {
    color:#515151;
}

.red { color: red; }

//Regular toggle
<div class="container">
  <div class="toggle">Toggle This Dropdown</div>
  <div class="toggle-content" style="display:none">
    <ul>
      <li><a href="#">How To Do This</a></li>
      <li><a href="#">Installing in The Mid 90s</a></li>
    </ul>
</div>

//If toggle class is applied to <h2> and next sibling is 
//NOT toggle-content
<div class="container">
  <h2 class="toggle">Click This Dropdown 2</h2>
  <p>Some random text between the toggle and toggle-content</p>
  <ul class="toggle-content" style="display:none">
      <li><a href="#">Boop</a></li>
      <li><a href="#">Bop</a></li>
  </ul>
</div>

//If the toggle class is applied to <p> and has a red class
<div class="container">
  <p class="toggle red">Click This Dropdown 3</p>
  <ul class="toggle-content" style="display:none">
      <li><a href="#">Heyo</a></li>
      <li><a href="#">Hiya</a></li>
  </ul>
</div>

如何在拥有其他类别的同时切换具有特定类别的元素

1 个答案: