单击时展开子UL在jQuery中不起作用

Question

我是JS新手，在切换show / hide时遇到了隐藏ul菜单的问题。

来源：

<ul class="main-menu">
    <li class="static-content" data-leaf="true" id="contact">
        <a href="contactUs.html">Contact Us</a>
    </li>

    <li class="" data-leaf="false" id="rules">
        <a href="">Sports Betting Rules</a>

        <ul class="submenu" id="submenu-rules" style="display: none;">
            <li class="static-content wager-types" data-leaf="true" id=
            "types">
                <a href="wagerTypes.html">Wager Types</a>
            </li>

            <li class="static-content" data-leaf="true" id="odds">
                <a href="oddsAndLines.html">Odds &amp; Lines</a>
            </li>

            <li class="static-content rules-policies" data-leaf="true" id=
            "policies">
                <a href="rulesAndPolicies.html">Rules &amp; Policies</a>
            </li>

            <li class="static-content" data-leaf="true" id="bonuses">
                <a href="sportsBonuses.html">Sports Bonuses</a>
            </li>
        </ul>
    </li>

    <li class="" data-leaf="false" id="conditions">
        <a href="">Terms &amp; Conditions</a>

        <ul class="submenu" id="submenu-conditions" style="display: none;">
            <li class="static-content" data-leaf="true" id=
            "termsOfService">
                <a href="termsOfService.html">Terms of Service</a>
            </li>

            <li class="static-content" data-leaf="true" id="privacy">
                <a href="privacy.html">Privacy Policy</a>
            </li>
        </ul>
    </li>

    <li class="static-content" data-leaf="true" id="view">
        <a href="view.html">View in: Mobile | Full Site</a>
    </li>
</ul>

JS

// Expanding JS for sub-menus
    $('.submenu').hide();
    $(".li a").click(function (e) {
        if ($(this).parent().data("leaf") == 'false') {
            e.preventDefault();
            $(this).siblings('ul').toggle();
        }

        return false;
    });

当我单击父li data-leaf为false的链接时，我需要它来toggle / show子ul，但我认为我做错了什么。

有没有人有主意？

Answer 1

您可以使用数据属性来确定选择器的目标：$('li[data-leaf="false"]>a')

​

$(document).ready(function() {
    $('.submenu').hide();
    $('li[data-leaf="false"]>a').on('click', function(e) {
        e.preventDefault();
    	console.log('hey hey');
        $(this).closest('li').find('ul').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul class="main-menu">
    <li class="static-content" data-leaf="true" id="contact">
        <a href="contactUs.html">Contact Us</a>
    </li>

    <li class="" data-leaf="false" id="rules">
        <a href="">Sports Betting Rules</a>

        <ul class="submenu" id="submenu-rules" style="display: none;">
            <li class="static-content wager-types" data-leaf="true" id=
            "types">
                <a href="wagerTypes.html">Wager Types</a>
            </li>

            <li class="static-content" data-leaf="true" id="odds">
                <a href="oddsAndLines.html">Odds &amp; Lines</a>
            </li>

            <li class="static-content rules-policies" data-leaf="true" id=
            "policies">
                <a href="rulesAndPolicies.html">Rules &amp; Policies</a>
            </li>

            <li class="static-content" data-leaf="true" id="bonuses">
                <a href="sportsBonuses.html">Sports Bonuses</a>
            </li>
        </ul>
    </li>

    <li class="" data-leaf="false" id="conditions">
        <a href="">Terms &amp; Conditions</a>

        <ul class="submenu" id="submenu-conditions" style="display: none;">
            <li class="static-content" data-leaf="true" id=
            "termsOfService">
                <a href="termsOfService.html">Terms of Service</a>
            </li>

            <li class="static-content" data-leaf="true" id="privacy">
                <a href="privacy.html">Privacy Policy</a>
            </li>
        </ul>
    </li>

    <li class="static-content" data-leaf="true" id="view">
        <a href="view.html">View in: Mobile | Full Site</a>
    </li>
</ul>

​

Answer 2

你的代码有两个问题。

1..li不是一个类，它是html元素，所以它应该是$("li>a").click(function (e) {

1. 值false是布尔值，而不是字符串，因此请使用此if ($(this).parent().data("leaf") == false) {

Your code working Demo

Answer 3

只需在你的js中的li前面去掉.(点)，它工作得很好！

// Expanding JS for sub-menus
    $('.submenu').hide();
    $("li a").click(function (e) {
        if ($(this).parent().data("leaf") == 'false') {
            e.preventDefault();
            $(this).siblings('ul').toggle();
        }

        return false;
    });