Question

我有一些按钮片段，如果你点击它们会显示更多内容，如果你点击它们第二次他们可以在关闭前拍摄号召性用语。一切正常，但如果我点击一个关闭的按钮，那么我希望所有其他按钮关闭（如果它们打开）。

$('.contact-btn').click(function() {
  if ($(this).hasClass('mobile-open') &&
      !$('#desktop-indicator').is(':visible')) {
    console.log('call-to-action');
    return;
  }
  $(this).find('.contact-text').toggleClass('show');
  if ($(this).find('.contact-text').hasClass('show')) {
    var width = $(this).find('.contact-text')[0].scrollWidth + 55;
    $(this).find('.contact-text').css('max-width',width);
    if ($(this).hasClass('mobile-open') &&
        $('#phone-indicator').is(':visible')) {
      console.log('call-to-action');
      return;
    } else if ($('#desktop-indicator').is(':visible') ||
        $(this).hasClass('footer')) {
      console.log('open');
    }
  } else {
    $(this).find('.contact-text').css('max-width',0);
    if ($('#desktop-indicator').is(':visible') ||
        $(this).hasClass('footer')) {
      console.log('call-to-action');
    }
  }
});

.wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.contact-btn {
  margin: 1rem;
  padding: 1rem;
  background: red;
  color: #FFF;
  display: inline-block;
  width: auto;
  cursor: pointer;
  border: none;
}

.phone {
  white-space: nowrap;
  float: left;
}
.contact-text {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  visibility: 0;
  padding-left: 0;
  max-width: 0;
  transition: max-width 400ms ease-in-out, padding 400ms ease-in-out;
  &.show {
    padding-left: .5rem;
  }
}

@media (max-width: 479px) {
  .wrapper {
    flex-flow: column nowrap;
    align-items: flex-end;
  }
  .contact-btn.mobile-open > .contact-text {
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 200px !important;
    padding-left: .5rem;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button class="contact-btn mobile-open">
    <span class="phone"><strong>KLICK</strong></span>
    <span class="contact-text">078 800 70 70</span>
  </button>
  <button class="contact-btn footer">
    <span class="phone"><strong>KLICK</strong></span>
    <span class="contact-text">078 800 70 70</span>
  </button>
  <button class="contact-btn footer">
    <span class="phone"><strong>KLICK</strong></span>
    <span class="contact-text">078 800 70 70</span>
  </button>
  <div id="phone-indicator" class="hidden-sm-up"></div>
  <div id="desktop-indicator" class="hidden-lg-down"></div>
</div>

我玩了以下几行：

$('.contact-text').not($(this).find('.contact-text')).toggleClass('show');

$('.contact-text').not($(this).find('.contact-text')).removeClass('show');

$('.contact-text').not($(this).find('.contact-text')).hide();

但他们都没有给我预期的结果，我开始相信，我的方法可能完全错误，需要走另一条路。

修改将scss更改为正常css。如果需要，请说明：.mobile-open类在这里，因为我需要此按钮在移动设备上始终打开。这样做对我来说似乎是最简单的解决方案而且有效。但是，如果你想知道，我认为它不应该妨碍我想要的功能。但我错了！

编辑2： 如果我的解释不清楚：永远不会有2个打开的按钮，只有2.如果我打开一个并单击另一个按钮，则已打开的按钮关闭。我希望这能澄清我的解释。

Answer 1

你必须为js做一些矿工改变。

      $('.contact-btn').click(function() {
  if ($(this).hasClass('mobile-open') &&
      !$('#desktop-indicator').is(':visible')) {
    console.log('call-to-action');
    return;
  }
  //changes Here only
  if(!$(this).find('.contact-text').hasClass('show')){
  $(this).parent().find('.contact-text.show').toggleClass('show');
  $(this).parent().find('.contact-text').css('max-width',0);
  }

    $(this).find('.contact-text').toggleClass('show');

    if ($(this).find('.contact-text').hasClass('show')) {

      var width = $(this).find('.contact-text')[0].scrollWidth + 55;
      $(this).find('.contact-text').css('max-width',width);
      if ($(this).hasClass('mobile-open') &&
          $('#phone-indicator').is(':visible')) {
        console.log('call-to-action');
        return;
      } else if ($('#desktop-indicator').is(':visible') ||
          $(this).hasClass('footer')) {
        console.log('open');
      }
    } else {

      $(this).find('.contact-text').css('max-width',0);
      if ($('#desktop-indicator').is(':visible') ||
          $(this).hasClass('footer')) {
        console.log('call-to-action');
      }
    }
  });

更改在toggleClass之前和关闭标签时。

希望它会对你有所帮助。

找到updated pan

Answer 2

据我所知：

点击按钮应该切换它
当打开它时，我们应该关闭任何其他打开的
当关闭它时，我们应该发出号召性用语

见评论：

$('.contact-btn').click(function() {
  var $this = $(this);
  var $thisText = $this.find(".contact-text");
  // Call to action if it's already open
  if ($thisText.hasClass("show")) {
    console.log("call to action");
  }
  // Toggle this one
  $thisText.toggleClass("show");
  // Close any others that might be open
  $this.siblings().find(".contact-text.show").removeClass("show");
});

我添加了这个CSS：

.contact-btn > .contact-text.show {
      visibility: visible !important;
      opacity: 1 !important;
      max-width: 200px !important;
      padding-left: .5rem;
}

我删除了JavaScript代码中的各种max-width内容（使用CSS来处理它;我不得不承认它不是很清楚它在做什么）。你可能仍然需要调整，但这证明了基本概念：

运行示例：

$('.contact-btn').click(function() {
  var $this = $(this);
  var $thisText = $this.find(".contact-text");
  // Call to action if it's already open
  if ($thisText.hasClass("show")) {
    console.log("call to action");
  }
  // Toggle this one
  $thisText.toggleClass("show");
  // Close any others that might be open
  $this.siblings().find(".contact-text.show").removeClass("show");
});

.wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.contact-btn {
  margin: 1rem;
  padding: 1rem;
  background: red;
  color: #FFF;
  display: inline-block;
  width: auto;
  cursor: pointer;
  border: none;
}

.phone {
  white-space: nowrap;
  float: left;
}
.contact-text {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  visibility: 0;
  padding-left: 0;
  max-width: 0;
  transition: max-width 400ms ease-in-out, padding 400ms ease-in-out;
}
.contact-text.show {
    padding-left: .5rem;
}

@media (max-width: 479px) {
  .wrapper {
    flex-flow: column nowrap;
    align-items: flex-end;
  }
  .contact-btn.mobile-open > .contact-text {
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 200px !important;
        padding-left: .5rem;
  }
}
.contact-btn > .contact-text.show {
      visibility: visible !important;
      opacity: 1 !important;
      max-width: 200px !important;
      padding-left: .5rem;
}

<div class="wrapper">
  <button class="contact-btn">
    <span class="phone"><strong>KLICK</strong></span>
    <span class="contact-text">078 800 70 70</span>
  </button>
  <button class="contact-btn footer">
    <span class="phone"><strong>KLICK</strong></span>
    <span class="contact-text">078 800 70 70</span>
  </button>
  <button class="contact-btn footer">
    <span class="phone"><strong>KLICK</strong></span>
    <span class="contact-text">078 800 70 70</span>
  </button>
  <div id="phone-indicator" class="hidden-sm-up"></div>
  <div id="desktop-indicator" class="hidden-lg-down"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果打开

2 个答案: