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

您的代码有2个问题。

1。.li不是一个类，它是html元素所以它应该是$("li>a").click(function (e) {
2.值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;
    });

点击不能在jQuery中工作时扩展子UL

3 个答案: