javascript - 单击在 jQuery 中不起作用时扩展子 UL

Question

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

来源:

<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 的链接时，我需要它来切换/显示 子级 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>