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

请在下方查看。这对你有帮助。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: