Question

我想做一个下拉菜单。覆盖一段距离。但我有一个问题。当我打开产品菜单后单击产品菜单和打开菜单时，单击参考菜单打开。但是点击两个菜单就可以分解。这个问题是因为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');
    });

Answer 1

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

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

下拉菜单关于

1 个答案: