javascript - 如何使用jQuery赋予多个按钮不同的结果但相同的 Action

是否可以使多个按钮显示不同的菜单，但使用相同的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>

最佳答案

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

然后，通过隐藏所有菜单并显示具有按钮的data属性的相应值的菜单，来切换面板内部菜单的可见性。

我为您的演示制作了一个工作叉，可以在上找到它。
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>

希望这是您想要的。