Question

是否可以制作多个按钮，这些按钮将显示不同的菜单，但具有相同的jquery脚本，如下所示？

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

这个代码可以实现，如下所示吗？

（我发现此代码段因为coffeescript而无效，但它与此https://codepen.io/danjuls/pen/lefcG相同）

＆＃13;

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)

＆＃13;

@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

＆＃13;

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

＆＃13;

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>

希望这就是你要找的东西。

如何使用jquery为多个按钮提供不同的结果但同样的动作

1 个答案: