Question

这是由其他人创建的，但有些子菜单保持打开状态，而单击时则保持关闭状态。我知道我能做什么，但我对JS知之甚少。我在考虑sub5（子菜单的ID是否保持关闭），＆＃34;使某些事情成真，然后假如果不是sub5＆＃34; 我怎么能这样做？

HTML

<nav id="rightNav">
    <div class="menutitle first" onClick="SwitchMenu('sub1')">fabrics</div>
    <div id="sub1" class="submenu">
        <ul>
            <li><a href="leejofa_fabrics.htm">lee jofa</a></li>
            <li><a href="groundworks_fabrics.htm">groundworks</a></li>
            <li><a href="threads_fabrics.htm">threads</a></li>
            <li><a href="gpjbaker_fabrics.htm">gp &amp; j baker</a></li>
            <li><a href="mulberryhome_fabrics.htm">mulberry home</a></li>
            <li><a href="lifestyle_fabrics.htm">baker lifestyle</a></li>
            <li><a href="blithfield_fabrics.htm">blithfield</a></li>
        </ul>
    </div>
    <!-- end div#sub1 (fabrics) -->

    <div class="menutitle" onClick="SwitchMenu('sub2')">furniture</div>
    <div id="sub2" class="submenu">
        <ul>
            <li><a href="leejofa_upholstery.htm">lee jofa upholstery</a></li>
            <li><a href="leejofa_occasionals.htm">lee jofa occasionals</a></li>
            <li><a href="furniture/bunny_williams/bunny_williams.htm">Bunny Williams Home</a></li>
            <li><a href="../../hollandco.htm">holland &amp; co.</a></li>
            <li><a href="macrae_furniture.htm">macrae</a></li>
            <li><a href="elle_and_marks.htm">elle &amp; marks</a></li>
        </ul>
    </div>
    <!-- end div#sub2 (furniture) -->

    <div class="menutitle" onClick="SwitchMenu('sub3')">wallcoverings</div>
    <div id="sub3" class="submenu">
        <ul>
            <li><a href="leejofa_wallcoverings.htm">lee jofa</a></li>
            <li><a href="coleson_wallcoverings.htm">cole &amp; son</a></li>
            <li><a href="groundworks_wallcoverings.htm">groundworks</a></li>
            <li><a href="wallcoverings/threads_wallcoverings_variation.htm">threads</a></li>
            <li><a href="gpjbaker_wallcoverings.htm">gP &amp; j baker</a></li>
            <li id="blithfield-wall"><a href="wallcoverings/blithfield_wallcoverings_peggy_angus.htm">blithfield</a></li>
            <li><a href="farrowandball_wallcoverings.htm">farrow &amp; ball</a></li>
            <li><a href="lincrusta_wallcoverings.htm">lincrusta</a></li>
        </ul>
    </div>
    <!-- end div#sub3 (wallcoverings) -->

    <div class="menutitle"><a href="leejofa_trimmings.htm">trimmings</a></div>

    <div class="menutitle" onClick="SwitchMenu('sub5')">carpets</div>
    <div id="sub5" class="submenu">
        <ul>
            <li><a href="leejofa_carpet.htm">lee jofa carpet</a></li>
            <li id="gw-carpet"><a href="groundworks_carpet.htm">groundworks</a></li>
            <li><a href="threads_carpet.htm">threads</a></li>
        </ul>
    </div>
    <!-- end div#sub5 (carpets) -->

    <div class="menutitle" id="archive-collection"><a href="leejofa_collections.htm">designer collections</a></div>

    <div class="menutitle last"><a href="leejofa_archive.htm">archives</a></div>

</nav>
<!-- end nav#rightNav -->

JS

if (document.getElementById) { //DynamicDrive.com change
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
}

function SwitchMenu(obj) {
    if (document.getElementById) {
        var el = document.getElementById(obj);
        var ar = document.getElementById("rightNav").getElementsByTagName("div"); //DynamicDrive.com change
        if (el.style.display != "block") { //DynamicDrive.com change
            for (var i = 0; i < ar.length; i++) {
                if (ar[i].className == "submenu") //DynamicDrive.com change
                    ar[i].style.display = "none";
            }
            el.style.display = "block";
        } else {
            el.style.display = "none";
        }
    }
}

Answer 1

你有一个班级和一个风格。

您的风格在课程中定义，因此您无法使用element.style访问它。

一个简单的解决方案是改变这一行：

<div id="sub5" class="submenu">

到

<div id="sub5" class="submenu" style="display:none;">

单击时如何保持子菜单打开？

1 个答案: