javascript - 使用 jQuery 1.8.3 切换

Question

像这样使用 jQuery 1.8.3 创建切换

 $(document).ready(function() {
        $('#showmenu1').click(function() {
                $('.menu1').slideToggle("fast");
        });
   
   $('#showmenu2').click(function() {
                $('.menu2').slideToggle("fast");
        });
   
   $('#showmenu3').click(function() {
                $('.menu3').slideToggle("fast");
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="showmenu1">Click Here</div>
<div class="menu1" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu2">Click Here</div>
<div class="menu2" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu3">Click Here</div>
<div class="menu3" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

如何减少上面的 jQuery 代码？

Answer 1

使用公共(public)类并使用next()

$(document).ready(function() {
    $('.menu-item').on("click", function() {
        $(this).next().slideToggle("fast");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="showmenu1" class="menu-item">Click Here</div>
<div class="menu1" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu2" class="menu-item">Click Here</div>
<div class="menu2" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu3" class="menu-item">Click Here</div>
<div class="menu3" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

或者如果菜单不在旁边，请使用数据属性

$(document).ready(function() {
    $('[data-toggles]').on("click", function() {
        var sel = $(this).data("toggles");
        $(sel).slideToggle("fast");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="showmenu1" data-toggles=".menu1">Click Here</div>
<div class="menu1" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu2" data-toggles=".menu2">Click Here</div>
<div class="menu2" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div id="showmenu3" data-toggles=".menu3">Click Here</div>
<div class="menu3" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>