Question

我希望此列表表现为手风琴。我必须在纯javascript中执行此操作，而不使用jQuery或其他外部库。我不允许调整下面显示的HTML代码。

<ul class="accordion">
        <li><a href="#">Apple</a>
            <ul>
                <li><a href="#">abc</a></li>
                <li><a href="#">xyz</a></li>
                <li><a href="#">pqr</a></li>
            </ul>
        </li>
        <li><a href="#">Apple1</a></li>
        <li><a href="#">Apple2</a></li>
        <li><a href="#">Apple3</a></li>
        <li><a href="#">Apple4</a></li>
    </ul>

我有以下由@Ruud提供的javascript代码，它显示了手风琴菜单，但它没有动画效果。我想要一次只激活一个项目的动画效果

window.getTopUL = function() {
    var uls = document.getElementsByTagName('UL');
    for (var i = 0; i < uls.length; i++) {
        if (uls[i].className == 'accordion') return uls[i];
    }
    return null;
};

window.getChild = function(li, tag) {
    return li.getElementsByTagName(tag)[0];
};

window.toggleDisplay = function(s) {
    s.display = s.display == 'none' ? 'block' : 'none';
};

window.setEventHandlers = function(topUL) {
    if (topUL) {
        var lis = document.getElementsByTagName('LI');
        for (var i = 0; i < lis.length; i++) {
            var ul = getChild(lis[i], 'UL');
            if (ul) {
                ul.style.display = 'none';
                getChild(lis[i], 'A').onclick = function() {
                    toggleDisplay(getChild(this.parentNode, 'UL').style);
                    return false;
                }
            }
        }
    }
};

setEventHandlers(getTopUL());

window.getTopUL = function() {
  var uls = document.getElementsByTagName('UL');
  for (var i = 0; i < uls.length; i++) {
    if (uls[i].className == 'accordion') return uls[i];
  }
  return null;
};

window.getChild = function(li, tag) {
  return li.getElementsByTagName(tag)[0];
};

window.toggleDisplay = function(s) {
  s.display = s.display == 'none' ? 'block' : 'none';
};

window.setEventHandlers = function(topUL) {
  if (topUL) {
    var lis = document.getElementsByTagName('LI');
    for (var i = 0; i < lis.length; i++) {
      var ul = getChild(lis[i], 'UL');
      if (ul) {
        ul.style.display = 'none';
        getChild(lis[i], 'A').onclick = function() {
          toggleDisplay(getChild(this.parentNode, 'UL').style);
          return false;
        }
      }
    }
  }
};

setEventHandlers(getTopUL());

<ul class="accordion">
  <li><a href="#">Apple</a>
    <ul>
      <li><a href="#">abc</a>
      </li>
      <li><a href="#">xyz</a>
      </li>
      <li><a href="#">pqr</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Apple1</a>
  </li>
  <li><a href="#">Apple2</a>
  </li>
  <li><a href="#">Apple3</a>
  </li>
  <li><a href="#">Apple4</a>
  </li>
</ul>

Answer 1

您可以使用简单的html和css

来完成

＆＃13;

/* Clean up the lists styles */
ul.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide the radio buttons */
/* These are what allow us to toggle content panes */
ul.accordion label + input[type='radio'] {
    display: none;
}

/* Give each content pane some styles */
ul.accordion li {
    background-color: #CCCCCC;
    border-bottom: 1px solid #DDDDDD;
}

/* Make the main tab look more clickable */
ul.accordion label {
    background-color: #666666;
    color: #FFFFFF;
    display: block;
    padding: 10px;
}

ul.accordion label:hover {
    cursor: pointer;
}

/* Set up the div that will show and hide */
ul.accordion div.content {
    overflow: hidden;
    padding: 0 10px;
    display: none;
}

/* Show the content boxes when the radio buttons are checked */
ul.accordion label + input[type='radio']:checked + div.content {
    display: block;
}

＆＃13;

<ul class='accordion'>
    <li>
        <label for='cp-1'>Content pane 1</label>
        <input type='radio' name='a' id='cp-1' checked='checked'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-2'>Content pane 2</label>
        <input type='radio' name='a' id='cp-2'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-3'>Content pane 3</label>
        <input type='radio' name='a' id='cp-3'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-4'>Content pane 4</label>
        <input type='radio' name='a' id='cp-4'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
    
    <li>
        <label for='cp-5'>Content pane 5</label>
        <input type='radio' name='a' id='cp-5'>
        <div class='content'>
            <p>content to be displayed</p>
        </div>
    </li>
</ul>

＆＃13;

如何在纯JavaScript和HTML中制作手风琴

1 个答案: