javascript - 使用javascript动态切换类

Question

我无法弄清楚如何根据单击的 anchor 文本切换类。

<div>
<a id="Menu1" href="#">Menu</a>
<div id="subMenu1" class="subLevel">
<p>stuff</p>
</div>

<div>
<a id="Menu2" href="#">Menu</a>
<div id="subMenu2" class="subLevel">
<p>stuff</p>
</div>

<div>
<a id="Menu3" href="#">Menu</a>
<div id="subMenu3" class="subLevel">
<p>stuff</p>
</div>

<script>
     $(document).ready(function () {

         $("#Menu" + [i]).on('click', function (e) {
             e.preventDefault();
             $("#subMenu" + [i]).toggleClass('dropDownShow');
         });
     });
</script>

无法确定 var i 从数字 1 到 3 的变化取决于被点击的 anchor 链接

Answer 1

这是一种方法:

<div>
    <a id="Menu1" class="menu" href="#">Menu</a>
    <div id="subMenu1" class="subLevel">
    <p>stuff</p>
    </div>

    <div>
    <a id="Menu2" class="menu" href="#">Menu</a>
    <div id="subMenu2" class="subLevel">
    <p>stuff</p>
    </div>

    <div>
    <a id="Menu3" class="menu" href="#">Menu</a>
    <div id="subMenu3" class="subLevel">
    <p>stuff</p>
    </div>

    <script>
             $(document).ready(function () {

                 $(".menu").on('click', function (e) {
                     e.preventDefault();
                     $(this).next().toggleClass('dropDownShow');
                 });
             });


        </script>