下拉菜单关于答案

【问题标题】：Dropdown Menu About下拉菜单关于
【发布时间】：2015-01-05 19:59:27
【问题描述】：

我想做一个下拉菜单。覆盖一段距离。但我有一个问题。当我单击产品菜单并打开产品菜单后打开菜单时，单击引用菜单打开。但是点击这两个菜单它可以被打破。这个问题是因为 Javascript。下面我分享我的代码还有 Html 和 Javascript。我等你的帮助。

---HTML---

<div class="cbp-hsinner">
    <ol class="parent">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Product</a>
            <ol class="child">
                <li>
                    <a href="#">
                        <img src="img/logom.jpg" alt="img01" />
                        <span>Delicate Wine</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/2.png" alt="img02" />
                        <span>Fine Spirit</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/3.png" alt="img03" />
                        <span>Heavenly Ale</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/4.png" alt="img04" />
                        <span>Juicy Lemonade</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/5.png" alt="img05" />
                        <span>Wise Whiskey</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/6.png" alt="img06" />
                        <span>Sweet Rum</span>
                    </a>
                </li>

            </ol>
        </li>

        <li>
            <a href="#">References</a>
            <ol class="child">
                <li>
                    <a href="#">
                        <img src="img/1.png" alt="img01" />
                        <span>Delicate Wine</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/2.png" alt="img02" />
                        <span>Fine Spirit</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/3.png" alt="img03" />
                        <span>Heavenly Ale</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/4.png" alt="img04" />
                        <span>Juicy Lemonade</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/5.png" alt="img05" />
                        <span>Wise Whiskey</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/6.png" alt="img06" />
                        <span>Sweet Rum</span>
                    </a>
                </li>
            </ol>
        </li>
        <li><a href="#">Contact</a></li>
    </ol>
</div>

---JavaScript---

    $('.child').hide();
    $('.parent > li > a').click(function () {         
        $(this).parent().find('.child').slideToggle('slow');
    });

【问题讨论】：

您能否为问题添加更多细节。你问的不是很清楚。
您的代码看起来不错 (JSFiddle example)。你用的是什么JS版本？
jquery 2.0.0.我用的是什么js版本？
问题当我单击产品菜单时。产品菜单正在打开。当我单击参考菜单时产品菜单打开。参考菜单正在打开。再次当我单击参考菜单时会崩溃。再见点击菜单我没问题。
test.avrasyademo.xyz/test2我做了例子。你能看例子吗。你能理解错误。我等待你的帮助。

标签： javascript jquery html css drop-down-menu

【解决方案1】：

您必须在打开菜单之前隐藏所有菜单。您可以使用此代码。

$('.child').hide();
$('.parent > li > a').click(function () {      
    $('.parent').find('.child').hide(); // this will hide menu
    $(this).parent().find('.child').slideToggle('slow');
});

【讨论】：

这里有人不知道吗？
shakeshack.com 有没有办法可以将子菜单集成到其中？我正在查看 Shake Shack 的网络菜单，并希望构建一个类似的“位置和菜单”下拉菜单。
test.avrasyademo.xyz/test2我做了例子。你能看例子吗。你能理解错误。我等待你的帮助。
请提及您的 Javascript 功能，只有我能帮助您。
你看我的例子了吗。然后你就可以理解这个问题了。我想在其中集成一个子菜单。