使用javascript动态切换类

时间:2016-05-18 15:46:32

标签: javascript jquery html css

我无法确定如何根据点击的锚文本来切换类。

<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之间的变化依赖于点击的锚点链接

1 个答案:

答案 0 :(得分:3)

这是一种方法:

<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>