激活模式时隐藏其他切换

Question

我有两个模式，左和右，单击时每个都下拉，并且希望只有一个切换在激活时显示为开/关。

现在，当任一模式打开时，两个切换都会出现。 当 LEFT 切换打开并且模态下拉时，我想隐藏 RIGHT 切换按钮和模态（反之亦然）。

 // common close button $('.toggle').click(function() { $(this).closest(".modal").toggleClass('modal-visible'); }); // explicit button per modal $('.toggle').on('click', function(e) { var modalid = $(this).data("modal-id"); $(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible'); });

 .modal { position: fixed; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; box-sizing: border-box; }.modal.modal-visible { visibility: visible; }.modal-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 0%; background: #fff; visibility: hidden; opacity: 0; transition: visibility 0s height 0.5s; box-sizing: border-box; }.modal.modal-visible.modal-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }.modal-wrapper { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0; background-color: #fff; box-sizing: border-box; }.modal-transition { transition: all 0.5s; transform: translateY(-100%); opacity: 1; }.modal.modal-visible.modal-transition { transform: translateY(0); opacity: 1; }.modal-header, .modal-content { padding: 1em; }.modal-header { position: relative; top: 10%; background-color: #fff; }.modal-close { position: fixed; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; font-size: 18px; }.modal-close:hover { color: #777; }.modal-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.modal-content>*:first-child { margin-top: 0; }.modal-content>*:last-child { margin-bottom: 0; }.modal.modal-scroll.modal-content { max-height: 100%; overflow-y: scroll; }.modal.modal-scroll.modal-wrapper { position: absolute; z-index: 9999; top: 2em; left: 50%; width: 32em; margin-left: -16em; background-color: #CDf; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); box-sizing: border-box; } button { background: transparent; font-family: 'Republique', sans-serif; font-variant: normal; font-weight: 400; font-size: 24px; line-height: 0.5; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; letter-spacing: .4px; color: #000; cursor: pointer; outline: 0; border: 0; padding: 4px; } #righty { position: fixed; right: 10px; top: 10px; z-index: 100000; } #lefty { position: fixed; left: 10px; top: 10px; z-index: 100000; } body { background: black; } button { mix-blend-mode: difference; color: white; } button:hover { color: #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="toggle" data-modal-id="lefty" id="lefty">LEFT</button> <button class="toggle" data-modal-id="righty" id="righty">RIGHT</button> <div class="modal" data-modal-id="lefty"> <div class="modal-overlay toggle"></div> <div class="modal-wrapper modal-transition"> <div class="modal-header"> <button class="modal-close toggle"></button> <h2 class="modal-heading">This is a modal on the left</h2> </div> <div class="modal-body"> <div class="modal-content"> </div> </div> </div> </div> <div class="modal" data-modal-id="righty"> <div class="modal-overlay toggle"></div> <div class="modal-wrapper modal-transition"> <div class="modal-header"> <h2 class="modal-heading">This is a modal on the right</h2> </div> <div class="modal-body"> <div class="modal-content"> </div> </div> </div> </div>

https://jsfiddle.net/envague/9x2vsw6h/1/

我尝试了 CSS 中的各种路线（嵌套 div、显示：无等）并努力寻找解决方案。 我的 javascript 知识很初级，所以也许那里有路？

Answer 1

我在你的 JS 中添加了 4 行：如果你没有点击同一个按钮，通过删除modal-visible class 关闭每个模式，如果你确实点击了相同的按钮，它只是忽略它并切换 class。

// common close button
$('.toggle').click(function() {
  $(this).closest(".modal").toggleClass('modal-visible');
});

// explicit button per modal
$('.toggle').on('click', function(e) {
  var modalid = $(this).data("modal-id");
  var visible = $('.modal-visible').data("modal-id");
  //check if the IDs are not the same
  if (visible != modalid) {
          $('.modal-visible').removeClass('modal-visible'); 
  }
  $(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});