Question

我正在尝试切换移动菜单，当我单击.dropdown-toggle时，我希望显示下拉菜单。但是在我的jquery中，因为当我使用“ this”时.dropdown-toggle在div之外，因此无法正常工作。我需要使用它，因为我将使用更多下拉菜单。有什么想法可以使其正常工作吗？

如果我将“ this”取出来，则该代码有效，但随后它将打开所有下拉列表。

        <ul id="mob_nav">
                <li id="dropdown" <?php if (is_tree(33)) echo 'class="selected"'; ?>>
                    <a class="orange">Making a claim</a>
                    <div class="dropdown-toggle">&#62;</div>
                        <ul class="dropdown-menu">
                            <li><a class="" href="">Medical negligence</a>
                                <div class="dropdown-toggle-sub">&#62;</div>
                                <ul class="dropdown-menu-sub">
                                    <li><a href="">test2</a></li>
                                    <li><a href="">test2</a></li>
                                    <li><a href="">test2</a></li>
                                    <li><a href="">test2</a></li>
                                </ul>
                            </li>
                        </ul>
                </li>

                <li <?php if (is_tree(35)) echo 'class="selected"'; ?>><a href="<?php bloginfo('url'); ?>/types-of-claims" class="red">Types of claims</a></li>
                <li <?php if (is_tree(37)) echo 'class="selected"'; ?>><a href="<?php bloginfo('url'); ?>/compensation-calculator" class="blue">Compensation calculator</a></li>
                <li <?php if (is_page(320)) echo 'class="selected"'; ?>><a href="<?php bloginfo('url'); ?>/about/charity" class="purple">Charity</a></li>
                <li <?php if (is_page(10)) echo 'class="selected"'; ?>><a href="<?php bloginfo('url'); ?>/about" class="green">About</a></li>
        </ul>
<script>
    $('.dropdown-toggle').click(function(){
        $('.dropdown-menu', this).toggle();
    });

    $('.dropdown-toggle-sub').click(function(){
        $('.dropdown-menu-sub', this).toggle();
    });
</script>

Answer 1

下拉菜单不是切换的子菜单。这是下一个兄弟姐妹。

$(this).next('.dropdown-menu').toggle();

与另一人相同。

$(this).next('.dropdown-menu-sub').toggle();

Answer 2

尝试一下：

$('.dropdown-toggle').on("click", function(){
    $(this).next('.dropdown-menu').toggle();
});

$('.dropdown-toggle-sub').on("click", function(){
    $(this).next('.dropdown-menu-sub').toggle();
});

我们正在获取具有所需类的下一个元素，然后对其进行切换。

jQuery使用'this'在div之外切换

2 个答案: