jquery - 下拉菜单打开所有子菜单

Question

我用 MDL 创建了一个侧边栏菜单，目前我正在尝试解决下拉菜单问题。单击菜单项后，它应该只为单个菜单项打开子菜单，但它会打开所有子菜单 - 每个具有子菜单的菜单项。

HTML

<li>
     <a class="mdl-navigation__link havesub_nav" href="javascript:void(0);">
                    <i  class="material-icons" role="presentation">create</i>
                                <?php echo $text_accounting; ?>
                                <i class="material-icons arrow_invert" role="presentation">chevron_right</i>
                            </a>
                        </strong>
                        <ul class="sub_nav">
                            <li>
                                <a class="mdl-navigation__link" href="<?php echo $account; ?>">
                                    <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                                    <?php echo $text_account; ?>
                                </a>
                            </li>
                            <li >
                                <a class="mdl-navigation__link" href="<?php echo $currency; ?>">
                                    <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                                    <?php echo $text_currency; ?>
                                </a>
                            </li>
                            <li >
                                <a class="mdl-navigation__link" href="<?php echo $inventory; ?>">
                                    <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                                    <?php echo $text_inventory; ?>
                                </a>
                            </li>
                            <li >
                                <a class="mdl-navigation__link" href="<?php echo $journal; ?>">
                                    <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                                    <?php echo $text_journal; ?>
                                </a>
                            </li>
                        </ul>

Javascript (jQuery)

    $(document).ready(function() {
    $('.havesub_nav').click(function(){
        $('.arrow_invert').toggleClass("transform_arrow");
        $('.sub_nav').slideToggle(200);
    });
});

Answer 1

发生这种情况是因为您引用了所有元素，例如:

$('.arrow_invert').toggleClass("transform_arrow");

通过本地搜索更改这些行:

$(this).find('.arrow_invert').toggleClass("transform_arrow");

一个例子:

$(function () {
  $('.havesub_nav').click(function(){
    $(this).find('.arrow_invert').toggleClass("transform_arrow");
    $(this).next('.sub_nav').slideToggle(200);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li>
    <a class="mdl-navigation__link havesub_nav" href="javascript:void(0);">
        <i  class="material-icons" role="presentation">create</i>
        <?php echo $text_accounting; ?>
        <i class="material-icons arrow_invert" role="presentation">chevron_right</i>
    </a>
    </strong>
    <ul class="sub_nav">
        <li>
            <a class="mdl-navigation__link" href="<?php echo $account; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_account; ?>
            </a>
        </li>
        <li >
            <a class="mdl-navigation__link" href="<?php echo $currency; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_currency; ?>
            </a>
        </li>
        <li >
            <a class="mdl-navigation__link" href="<?php echo $inventory; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_inventory; ?>
            </a>
        </li>
        <li >
            <a class="mdl-navigation__link" href="<?php echo $journal; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_journal; ?>
            </a>
        </li>
    </ul>
</li>
<li>
    <a class="mdl-navigation__link havesub_nav" href="javascript:void(0);">
        <i  class="material-icons" role="presentation">create</i>
        <?php echo $text_accounting; ?>
        <i class="material-icons arrow_invert" role="presentation">chevron_right</i>
    </a>
    </strong>
    <ul class="sub_nav">
        <li>
            <a class="mdl-navigation__link" href="<?php echo $account; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_account; ?>
            </a>
        </li>
        <li >
            <a class="mdl-navigation__link" href="<?php echo $currency; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_currency; ?>
            </a>
        </li>
        <li >
            <a class="mdl-navigation__link" href="<?php echo $inventory; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_inventory; ?>
            </a>
        </li>
        <li >
            <a class="mdl-navigation__link" href="<?php echo $journal; ?>">
                <i class="material-icons" role="presentation" style="font-size: 16px; margin-left: 30px; width: 0px;">chevron_right</i>
                <?php echo $text_journal; ?>
            </a>
        </li>
    </ul>
</li>