javascript - 如何使用 jquery 为多个按钮提供不同的结果但相同的操作

Question

是否可以使用相同的 jquery 脚本制作多个显示不同菜单的按钮，如下所示？

简单地说，这种效果但有多个按钮，每个按钮都显示自己的推送菜单

使用如下所示的代码可以实现这一点吗？

(我发现此代码片段由于 CoffeeScript 而不起作用，但它与此 https://codepen.io/danjuls/pen/lefcG 相同)

button = $('.mobile-menu')
container = $('.container')
body = $('body')

bodyClick = (event) ->
  if not $(event.target).closest('.menu').length
    body.off('click')
    container.toggleClass('menu-open')

button.on 'click', (event) ->
  event.stopPropagation()
  event.preventDefault()
  
  setTimeout (->
    container.toggleClass('menu-open')
    return
  ), 25

  body.on 'click', (event) ->
    if container.hasClass('menu-open')
      bodyClick(event)
   

@import compass

@import url(http://fonts.googleapis.com/css?family=Open+Sans)
  
*,
*:after,
*::before 
  box-sizing: border-box


html,
body,
.container,
.pusher,
.content
  height: 100%

body 
  background: #444
  color: fab
  font-weight: 300
  font-family: 'Open Sans', sans-serif

a 
  text-decoration: none
  color: #fff
  outline: none

ul
  list-style: none
  margin: 0
  padding: 0

button
  border: none
  padding: 0.5rem 1.2rem
  background: #388a5a
  color: #fff
  font-family: 'Open Sans', sans-serif
  font-size: 1rem
  text-transform: uppercase
  cursor: pointer
  display: inline-block
  margin: 1rem
  border-radius: .3rem


button:hover
  background: #2c774b
  
.content 
  overflow-y: scroll
  background: #f3efe0

.content,
.content-inner
  position: relative


.container 
  position: relative
  overflow: hidden

.pusher 
  position: relative
  left: 0
  z-index: 99
  height: 100%
  transition: transform 0.5s

.pusher::after 
  position: absolute
  top: 0
  right: 0
  width: 0
  height: 0
  background: rgba(0,0,0,0.2)
  content: ''
  opacity: 0
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s

.menu-open .pusher::after 
  width: 100%
  height: 100%
  opacity: 1
  transition: opacity 0.5s

.panel
  position: absolute
  top: 0
  left: 0
  z-index: 100
  visibility: hidden
  width: 300px
  height: 100%
  background: fab
  transition: all 0.5s


.panel::after
  position: absolute
  top: 0
  right: 0
  width: 100%
  height: 100%
  background: rgba(0,0,0,0.2)
  content: ''
  opacity: 1
  transition: opacity 0.5s


.menu-open .panel::after
  width: 0
  height: 0
  opacity: 0
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s
 

.menu-open .pusher 
  transform: translate3d(300px, 0, 0)

.panel
  transform: translate3d(-100%, 0, 0)

.menu-open .panel 
  visibility: visible
  transition: transform 0.5s

.panel::after
  display: none

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <div class="pusher">
    <div class="panel">
      <h2>Sidebar</h2>
      <nav class="menu">
        
        <ul>
           <li><a href="#">Data 1</a></li>
            <li><a href="#">Data 2</a></li>
            <li><a href="#">Data 3</a></li>
            <li><a href="#">Data 4</a></li>
            <li><a href="#">Data 5</a></li>
        </ul>
      </nav>
     </div>
     <div class="content">
		  <div class="content-inner">
        <h1>Testing a push menu</h1>
        <button class="mobile-menu">Push</button>
       </div>
    </div>
  </div>
</div>

Answer 1

您可以做的是将按钮链接到不同的菜单，例如通过使用 data-menu="menu-1"属性标记按钮并为面板内的菜单提供相应的类。

然后通过隐藏所有菜单并使用按钮数据属性的相应值显示菜单来切换面板内菜单的可见性。

我为你的演示制作了一个工作分支，可以在以下位置获得: https://codepen.io/anon/pen/OmJgbm

JS:

button = $('.mobile-menu')
container = $('.container')
body = $('body')

bodyClick = (event) ->
  if not $(event.target).closest('.menu').length
    body.off('click')
    container.toggleClass('menu-open')

button.on 'click', (event) ->
  event.stopPropagation()
  event.preventDefault()

  $('.js-menu').hide();
  menu = $(this).data('menu');
  $('.' + menu).show();

  setTimeout (->
    container.toggleClass('menu-open')
    return
  ), 25

  body.on 'click', (event) ->
    if container.hasClass('menu-open')
      bodyClick(event)

HTML

<div class="container">
  <div class="pusher">
    <div class="panel">
      <div class="js-menu menu-1" style="display:none;">
        <h2>Sidebar 1</h2>
        <nav class="menu">

          <ul>
             <li><a href="#">Data 1</a></li>
              <li><a href="#">Data 2</a></li>
              <li><a href="#">Data 3</a></li>
              <li><a href="#">Data 4</a></li>
              <li><a href="#">Data 5</a></li>
          </ul>
        </nav>
      </div>
      <div class="js-menu menu-2" style="display:none;">
        <h2>Sidebar 2</h2>
        <nav class="menu">

          <ul>
             <li><a href="#">Data 1</a></li>
              <li><a href="#">Data 2</a></li>
              <li><a href="#">Data 3</a></li>
              <li><a href="#">Data 4</a></li>
              <li><a href="#">Data 5</a></li>
          </ul>
        </nav>
      </div>
     </div>
     <div class="content">
          <div class="content-inner">
        <h1>Testing a push menu</h1>
        <button class="mobile-menu" data-menu="menu-1">Open menu 1</button>
        <button class="mobile-menu" data-menu="menu-2">Open menu 2</button>
       </div>
    </div>
  </div>
</div>

希望这就是您正在寻找的内容。