下拉菜单

Question

我想做下拉菜单。掩护一段距离。但我有个问题。当我单击“产品”菜单和“产品”菜单后的“打开”菜单时，单击“参考”菜单打开。但是点击这两个菜单，它可以被分解。这个问题是因为Javascript。下面我分享我的代码，也是Html和Javascript。我等你的帮助。

----

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

Answer 1

在打开菜单之前，你必须隐藏所有菜单。你可以用这段代码。

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