javascript - 单击其他元素时打开页脚元素

Question

我的页脚有一个问题:我希望我的页脚位于右下角并固定，起初很少，然后在使用 jquery 函数 .on() 单击时扩展以显示 li 元素。

我尝试在 div“联系我们”之外，但没有任何效果。

这是一个 JS FIDDLE:https://jsfiddle.net/e2g1hwgu/

我的 HTML 部分:

<footer>
    <section class="footer">
        <div class="contact-us"><b>Contact us!</b>

            <ul class="contactusshow">
                <li> Our mail : aaaa@aaa.com </li>
                <li> Phone : 00 00 00 00 00</li>
                <li> Address: everywhere! </li>
            </ul>
        </div>
    </section>
</footer>

我的 CSS 部分:

 footer{
  position:fixed;
  bottom: 5px;
  right: 10px;
}
.footer{}

.contact-us:hover{
  background: #A26161;
  text-decoration: none;
}
.contact-us{
  background-color: #8B0000;
  color: #fff;
  padding: 5px 5px 5px 5px;
  border-radius: 2px 2px 2px 2px;
  display: flex;
  right:0%;
}
.contactusshow{
  background-color: #8B0000;
  color:#fff;
  display: none;
}

和 JS 部分:

jQuery(function($){
 $('.contact-us').on('click' function() {
    $(this).find('.contactusshow').slideToggle();
  });

 });

你有什么线索吗？

谢谢!

Answer 1

请检查下面。这会对您有所帮助。

jQuery(function($){
 $('.contact-us').on('click', function() {
    $(this).find('.contactusshow').slideToggle();
  });

 });

footer{
  position:fixed;
  bottom: 5px;
  right: 10px;
}
.footer{}

.contact-us:hover{
  background: #A26161;
  text-decoration: none;
}
.contact-us{
  background-color: #8B0000;
  color: #fff;
  padding: 5px 5px 5px 5px;
  border-radius: 2px 2px 2px 2px;
  display: flex;
  right:0%;
}
.contactusshow{
  background-color: #8B0000;
  color:#fff;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
<section class="footer">
  <div class="contact-us"><b>Contact us!</b>

  <ul class="contactusshow">
      <li> Our mail : aaaa@aaa.com </li>
      <li> Phone : 00 00 00 00 00</li>
      <li> Address: everywhere! </li>
  </ul>
</div>

如果您有任何其他具体要求，请告诉我，