用jQuery 1.8.3切换

Question

使用jQuery 1.8.3创建切换，如下所示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何减少上面的jQuery代码？

Answer 1

使用公共类并使用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>

Answer 2

而不是ID更改为class属性并使用$(this)上下文并参考下一个div来显示：

$(document).ready(function() {
  $('.showmenu').click(function() {
    $(this).next('.menu').slideToggle("fast");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>
<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
  <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
  </ul>
</div>

Answer 3

以下是如何在不更改HTML的情况下最大限度地减少jQuery代码 ：

 $(document).ready(function() {
    $('[id^=showmenu]').click(function() {
        $(this).next('[class^=menu]').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>