Как сделать вкладку, содержащую меню с гибкой высотой, закрепленной в нижней части окна и сдвинуть ее вверх при нажатии jQuery?

Question

Я пытался кодировать его сам, основываясь на исследовании inte rnet. Я смог исправить это внизу. При щелчке оно выдвигается из меню; но он выдвигается вниз, когда должен был нажать на вкладку вверх, чтобы отобразить меню. Если я использую отрицательное поле и просто изменяю bottom: -150 на bottom: 0px при клике, это приводит к желаемому поведению, сдвигая его за нижнюю часть окна, и оно отображается правильно. Но это означает, что меню толкает страницу за нижнюю часть страницы, а не просто скрывается. Поэтому, когда он «скрыт», можно просто прокрутить вниз и увидеть полное меню, чего не должно быть.

Поэтому вместо того, чтобы использовать bottom, я попытался использовать $(this).show("slide"). Меню получилось искаженным благодаря использованию скользящей анимации.

Вот фрагмент:

var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
  $('#dcsupportcontainer').slideToggle(500, function() {
    //execute this after slideToggle is done
  });
  supTabState = !supTabState;
  if (supTabState) {
    //    $("#dccontainer").css('bottom', '0px');
    $(this).show("slide", {
      direction: "down"
    }, 1000);
  } else {
    //    $("#dccontainer").css('bottom', '-150px');
    $(this).show("slide", {
      direction: "up"
    }, 1000);
  }
});

#dccontainer {
  position: absolute;
  bottom: 0;
  width: 300px;
  left: 50%;
  height: 200px;
  margin-left: -150px;
  transition: .5s;
  overflow: hidden;
}

#dccontainer * {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
  font-weight: bold;
  /* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}

#dcsupporttab {
  background-color: #f5f5f5;
  color: #434343;
  text-align: center;
  width: 150px;
  padding: 10px;
  padding-bottom: 3px;
  margin: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
}

#dcsupportcontainer {
  background-color: #f5f5f5;
  padding-top: 10px;
  color: #434343;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  /*height: calc(100% - 43px); */
  display: none;
}

.dcbutton {
  display: flex;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 230px;
  height: 40px;
}

.dcthelabel {
  text-decoration: none;
  color: #434343;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nonsolid {
  background-color: #f5f5f5;
  border-color: #fff;
  border-style: solid;
  border-width: 3px;
}

#dcmessageus {
  text-transform: none;
}

#dcaslnow {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
  <p id="dcsupporttab">Support</p>
  <div id="dcsupportcontainer">
    <div class="dcbutton" id="dcaslnow">
      <a href="#" class="dcthelabel">ASL Now</a>
    </div>
    <div class="dcbutton" id="dctextchat">
      <a href="#" class="dcthelabel">Text Chat</a>
    </div>
    <div class="dcbutton nonsolid" id="dcmessageus">
      <a href="#" class="dcthelabel">Send Us a Message</a>
    </div>
    <p id="dcvpinfo">Video Chat: (123) 456-7890</p>
  </div>
</div>

Я пробовал различные техники. Я пытался переключаться только с CSS, используя CSS анимацию и toggleClass, я пытался использовать slide, и я пытался использовать slideToggle. Я также попытался использовать display: block; вместо flexbox. Оба имели одинаковый эффект. Исследование inte rnet привело к нескольким возможным решениям (которые я пробовал, но все получили одинаковый результат), и они обычно не основывались на элементе, который был зафиксирован в нижней части окна. Единственное, что подошло ближе всего к тому, что я искал, это:

http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html

Но странно, когда я пытался использовать тот же код, который использовал, ничего не случилось. Нажатие не вызывало меню. Я в растерянности на данный момент. Куда я иду не так?

Это моя последняя попытка (используя приведенный выше код): https://codepen.io/doncullen/pen/JjdrxzY

Answer 1

Чтобы ответить на ваш вопрос Где я ошибаюсь : вы указываете фиксированную высоту 200 пикселей на #dccontainer. Указание фиксированной высоты контейнера делает jQuery slideToggle бесполезным. jQuery s slideToggle анимирует высоту данного элемента, и в вашем случае вы анимируете #dcsupportcontainer. Даже если вы анимируете высоту от #dcsupportcontainer до 0 пикселей, используя slideToggle, вся поддержка блок все равно останется на высоте 200 пикселей. Это заставляет весь блок не переходить на вниз , когда #dcsupportcontainer исчезает. Вы, конечно, можете вручную вычислить и присвоить новое значение bottom для #dccontainer, но это очень хлопотно и не очень интуитивно понятно.

Не желая самостоятельно вычислять значение bottom, я не буду установите высоту #dccontainer и просто установите ее высоту. Он установит свою высоту в соответствии со всеми требованиями детей (значение по умолчанию auto). Кроме того, вместо fixed вы использовали absolute. Вы должны использовать fixed здесь, так как вы хотите, чтобы блок поддержки всегда был виден (даже когда пользователь прокручивает страницу вниз); это означает, что вы должны позиционировать его на основе вашего видового экрана, а не элемента (подробнее о позиционировании здесь ). Я также внес небольшие изменения в ваши стили CSS, чтобы сделать их более лаконичными. И последнее, я предлагаю вам пересмотреть flexbox здесь и здесь , чтобы использовать его лучше.

Вот рабочее решение:

// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()

$("#dcsupporttab").click(function() {
  $('#dcsupportcontainer').slideToggle(500)
});

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  min-width: 100vw;
  min-height: 100vh;
}

#dccontainer {
  position: fixed;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50vw;
  min-width: 200px;
  font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}

#dccontainer * {
  padding: 7px 20px;
  text-align: center;
}

#dcsupporttab {
  font-weight: bold;
  border-radius: 5px 5px 0 0;
  background: #121212;
  color: #ffffffee;
  cursor: pointer;
}

#dcsupportcontainer {
  border: 1px solid #121212;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
  <p id="dcsupporttab">Support</p>
  <div id="dcsupportcontainer">
    <div class="dcbutton" id="dcaslnow">
      <a href="#" class="dcthelabel">ASL Now</a>
    </div>
    <div class="dcbutton" id="dctextchat">
      <a href="#" class="dcthelabel">Text Chat</a>
    </div>
    <div class="dcbutton nonsolid" id="dcmessageus">
      <a href="#" class="dcthelabel">Send Us a Message</a>
    </div>
    <p id="dcvpinfo">Video Chat: (123) 456-7890</p>
  </div>
</div>

Answer 2

Просто возьмите фиксированную высоту из вашего основного контейнера #dccontainer, и все будет хорошо. Вы также должны удалить несколько строк вашего javascript кода, чтобы все исправить. Эта фиксированная высота dccontainer заставляет всю навигацию стоять на 200 пикселей вверх от нижней части вашей страницы, и это заставляет вас использовать jQuery, чтобы зафиксировать ее внизу. Помните, что bottom: 0px установит нижнюю часть вашего элемента на 0px в нижней части его контейнера.

$("#dcsupporttab").click(function() {
  $('#dcsupportcontainer').slideToggle(500, function() {
    //execute this after slideToggle is done
  });
});

#dccontainer {
  position: absolute;
  bottom: 0px;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  transition: .5s;
  overflow: hidden;
}

#dccontainer * {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
  font-weight: bold;
  /* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}

#dcsupporttab {
  background-color: #f5f5f5;
  color: #434343;
  text-align: center;
  width: 150px;
  padding: 10px;
  padding-bottom: 3px;
  margin: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
}

#dcsupportcontainer {
  background-color: #f5f5f5;
  padding-top: 10px;
  color: #434343;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  /*height: calc(100% - 43px); */
  display: none;
}

.dcbutton {
  display: flex;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 230px;
  height: 40px;
}

.dcthelabel {
  text-decoration: none;
  color: #434343;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nonsolid {
  background-color: #f5f5f5;
  border-color: #fff;
  border-style: solid;
  border-width: 3px;
}

#dcmessageus {
  text-transform: none;
}

#dcaslnow {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
  <p id="dcsupporttab">Support</p>
  <div id="dcsupportcontainer">
    <div class="dcbutton" id="dcaslnow">
      <a href="#" class="dcthelabel">ASL Now</a>
    </div>
    <div class="dcbutton" id="dctextchat">
      <a href="#" class="dcthelabel">Text Chat</a>
    </div>
    <div class="dcbutton nonsolid" id="dcmessageus">
      <a href="#" class="dcthelabel">Send Us a Message</a>
    </div>
    <p id="dcvpinfo">Video Chat: (123) 456-7890</p>
  </div>
</div>