显示同一类的不同按钮的不同div

Question

我（目前）有三个按钮

<p><button class="trigger-overlay" type="button">Open Overlay 1</button></p>
<p><button class="trigger-overlay" type="button">Open Overlay 2</button></p>
<p><button class="trigger-overlay" type="button">Open Overlay 3</button></p>

使用这些按钮，我想显示不同的菜单/覆盖。覆盖图如下所示：

        <!-- Menu1 -->
<div class="overlay overlay-hugeinc">
    <button type="button" class="overlay-close">Close</button>
    <nav>
        <ul>
            <li><a class="menuitem1">Menu1</a></li>
            <li><a class="menuitem2">Item2</a></li>
        </ul>
    </nav>
</div>
<!-- Menu2 -->
<div class="overlay overlay-hugeinc">
    <button type="button" class="overlay-close">Close</button>
    <nav>
        <ul>
            <li><a class="menuitem1">Menu2</a></li>
            <li><a class="menuitem2">Item1</a></li>
        </ul>
    </nav>
</div>
        <!-- Menu3 -->
<div class="overlay overlay-hugeinc">
    <button type="button" class="overlay-close">Close</button>
    <nav>
        <ul>
            <li><a class="menuitem1">Menu3</a></li>
            <li><a class="menuitem2">Item1</a></li>
        </ul>
    </nav>
</div>

这方面的JS是：

(function() {
        var triggerButtons = document.getElementsByClassName( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
        }
    }


for (var i = 0; i < triggerButtons.length; i++) {
    triggerButtons[i].addEventListener( 'click', toggleOverlay );
}
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

我的问题是只有菜单1正在显示。脚本可以正常工作，但是menu2和menu3没有显示。

我想这一定是函数toggleoverlay缺少的东西。也许是a$(this)什么的（对不起我的JS已经不是以前的样子了）。我在triggerbuttons中循环，然后从google chrome dev中点击了“Right”按钮（我想，很难说出来）。

预期结果：如果我按下按钮3，菜单3显示。如果我按下按钮2，我会看到菜单2，依此类推。

Answer 1

只是您可以为div使用不同的id并使用该id执行操作

Answer 2

此代码将解决您的问题。我添加了红色和蓝色的css类，分别用于关闭和打开，以使其可见。

null

(function() {
  var triggerButtons = document.getElementsByClassName('trigger-overlay'),
    overlay = document.querySelectorAll('div.overlay');
  var closeButtons = [];
  for (var i = 0; i < overlay.length; i++) {
    var closeBttn = overlay[i].querySelector('button.overlay-close');
    closeButtons.push(closeBttn);
  }

  transEndEventNames = {
      'WebkitTransition': 'webkitTransitionEnd',
      'MozTransition': 'transitionend',
      'OTransition': 'oTransitionEnd',
      'msTransition': 'MSTransitionEnd',
      'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
    support = {
      transitions: Modernizr.csstransitions
    };

  function toggleOverlay(overlay) {
    if (classie.has(overlay, 'open')) {
      classie.remove(overlay, 'open');
      classie.add(overlay, 'close');
      var onEndTransitionFn = function(ev) {
        if (support.transitions) {
          if (ev.propertyName !== 'visibility') return;
          this.removeEventListener(transEndEventName, onEndTransitionFn);
        }
        classie.remove(overlay, 'close');
      };
      if (support.transitions) {
        overlay.addEventListener(transEndEventName, onEndTransitionFn);
      } else {
        onEndTransitionFn();
      }
    } else {
      classie.add(overlay, 'open');
      classie.remove(overlay, 'close');
    }
  }


  for (var i = 0; i < triggerButtons.length; i++) {
    triggerButtons[i].addEventListener('click', (function(i) {
      return function() {
        toggleOverlay(overlay[i])
      };
    })(i));
  }

  for (var i = 0; i < closeButtons.length; i++) {
    closeButtons[i].addEventListener('click', (function(i) {
      return function() {
        toggleOverlay(overlay[i])
      };
    })(i));
  }
})();

.overlay.close {
  background-color: red;
}
.overlay.open {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<p>
  <button class="trigger-overlay" type="button">Open Overlay 1</button>
</p>
<p>
  <button class="trigger-overlay" type="button">Open Overlay 2</button>
</p>
<p>
  <button class="trigger-overlay" type="button">Open Overlay 3</button>
</p>

<!-- Menu1 -->
<div class="overlay overlay-hugeinc close">
  <button type="button" class="overlay-close">Close</button>
  <nav>
    <ul>
      <li><a class="menuitem1">Menu1</a>
      </li>
      <li><a class="menuitem2">Item2</a>
      </li>
    </ul>
  </nav>
</div>
<!-- Menu2 -->
<div class="overlay overlay-hugeinc close">
  <button type="button" class="overlay-close">Close</button>
  <nav>
    <ul>
      <li><a class="menuitem1">Menu2</a>
      </li>
      <li><a class="menuitem2">Item1</a>
      </li>
    </ul>
  </nav>
</div>
<!-- Menu3 -->
<div class="overlay overlay-hugeinc close">
  <button type="button" class="overlay-close">Close</button>
  <nav>
    <ul>
      <li><a class="menuitem1">Menu3</a>
      </li>
      <li><a class="menuitem2">Item1</a>
      </li>
    </ul>
  </nav>
</div>