Question

我有一个类.submenu-toggle的两个切换，它们包含一个带有类.submenu的ul子。我想要发生的是当用户点击.submenu-toggle时，显示该类（子菜单切换）的ul子（.submenu），然后再次单击它时，它将被隐藏。

我需要使用纯Javascript而不使用任何JQuery来实现这一点。

如果你能够让我知道如何隐藏.submenu，如果用户在该元素外部点击那就太棒了......那就太棒了！

感谢您的时间和帮助。

这是我目前的Javascript：

<ul>
     <li class="submenu-toggle"><a href="#">Menu 1</a>
        <ul class="submenu">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="submenu-toggle"><a href="#">Menu 2</a>
        <ul class="submenu">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

这是我目前的html：

def find_name(file):
    gene_count = defaultdict(lambda:[0,0,0])
    pattern = re.compile(r"[A-Za-z ]*")
    pattern_v = re.compile(r"\;[A-Z]+V[0-9]?\;")
    pattern_d = re.compile(r"\;[A-Z]+D[0-9]?\;")
    pattern_j = re.compile(r"\;[A-Z]+J[0-9]?\;")
    for i in file.readlines():
        name = pattern.search(i)
        name = name.group()
        if name not in gene_count and name != "Species":
            gene_count.update({name:[0,0,0]})
        if pattern_v.search(i):
            gene_count[name][0] += 1
        elif pattern_d.search(i):
            gene_count[name][1] += 1
        elif pattern_j.search(i):
            gene_count[name][2] += 1
    return gene_count

Answer 1

您可以使用CSS轻松完成此菜单。但这是一个使用vanilla JavaScript的例子：

// JS
var submenu = document.getElementsByClassName("submenu-toggle");

for (var i = 0; i < submenu.length; i++) {
    submenu[i].addEventListener('click', menus, false);
}

function menus() {
  var menu = this.querySelector('.submenu');
  menu.classList.toggle("hidden");
};

// CSS

.hidden {
   display: none;
}

DEMO - Codepen

切换点击类纯Javascript的孩子 - 没有JQuery

1 个答案: