單擊不適用於jQuery時展開子UL

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) {

您的代碼工作演示

Answer 3

只需在您的js中的li之前刪除。（dot），就可以了！

// 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;
    });