1

我在页面底部有一个固定的页脚，当您将鼠标悬停在 div 上时会展开以显示内容。这适用于所有浏览器，除了当我在触摸设备上测试它时，我只能点击 div 来显示它，但点击其他任何地方都不会折叠它。我已经尝试了一些方法来解决这个问题，但我对 Javascript 非常陌生，不幸的是大部分都是自学的，所以我缺乏很强的把握。我希望有人能理解我做错了什么。

谢谢！

剧本：

<script type="text/javascript">
$(document).ready(function() {

  $(".footer-wrapper").hover(
    //on mouseover
    function() {
      $(this).animate({
        height: '+=23%' //adds 23%
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
    function() {
      $(this).animate({
        height: '4em' //changes back to 4em
        }, 'slow'
      );
    }
  );
});
</script>

HTML：

<!-- footer !-->

<div class="footer-wrapper">
    <img src="images/footergraphic.png" alt="Business Name"  id="footeroverlay"/> 
<div id="footerinfo">

    <ul>
    <li>
      <h3>About Us</h3>
    </li>
        <li><a href="#" class="infolink">Portfolio</a></li>
        <li><a href="#" class="infolink">Contact Us</a></li>
        <li><a href="#" class="infolink">Our Policies</a></li>
        <li><a href="#" class="infolink">History</a></li>
        <li><a href="#" class="infolink">Associates</a></li>
        <li><a href="#" class="infolink">Testimonials</a></li>
    </ul> 
    <!-- /about !-->       
    <ul>
    <li>
      <h3>Services</h3>
    </li>
        <li><a href="#" class="infolink">Web Applications</a></li>
        <li><a href="#" class="infolink">Data Cabling</a></li>
        <li><a href="#" class="infolink">Document Management</a></li>
        <li><a href="#" class="infolink">Data Recovery</a></li>
        <li><a href="#" class="infolink">Data Duplication</a></li>
        <li><a href="#" class="infolink">Computer Support</a></li>
        <li><a href="#" class="infolink">Remote Backup</a></li>
    </ul>
    <ul>
    <li>
      <h3>Services Cont.</h3>
    </li>
        <li><a href="#" class="infolink">Web Design</a></li>
        <li><a href="#" class="infolink">Graphic Design</a></li>
        <li><a href="#" class="infolink">Print Design</a></li>
        <li><a href="#" class="infolink">Plotter Printing</a></li>
        <li><a href="#" class="infolink">Internet Service</a></li>
        <li><a href="#" class="infolink">Web Hosting</a></li>
        <li><a href="#" class="infolink">Dedicated Remote Storage</a></li>
    </ul> 
        <!-- /services !-->   
    <ul>
    <li>
      <h3>Marketing</h3>
    </li>
        <li><a href="#" class="infolink">Local Search Engine<br /> Optimization </a></li>
        <li><a href="#" class="infolink">Search Engine 
<br /> Optimization</a></li>
        <li><a href="#" class="infolink">Pay Per Click (PPC)</a></li>
        <li><a href="#" class="infolink">Social Media 
<br />Marketing</a></li>
    </ul>  
    <!-- /marketing !-->           
    <ul>
    <li>
      <h3>Products</h3>
    </li>
        <li><a href="#" class="infolink">Thing</a></li>
        <li><a href="#" class="infolink">thing</a></li>
        <li><a href="#" class="infolink">thing</a></li>
    </ul>
    <!-- /products !-->
    </div>

    <div class="footertext">
  Copyright © 2012 <a href="#" class="infolink">Business name</a>. All rights reserved.
    <br /> Designed by <a href="#" class="infolink">Business Name</a>.  </div>
  <img src="images/smalllogo.png" alt="Business name" style="padding-right:1em;float:right;" id="footer-logo"/>
</div>

CSS：

/* footer styles */
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px #000000;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-decoration: none;
    margin-bottom: 1em;
}

.footer-wrapper {
    z-index: 1999;
    margin-top: 2em;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    float: left;
    width: 100%;
    height: 4em;
    bottom: 0em;
    background-image: url(../images/footerbg.png);
    background-repeat: repeat;
    background-color: #0a356d;
    border-top-width: .3em;
    border-top-style: solid;
    border-top-color: #0976bd;
    -ms-touch-action: none;

    /* shadow attributes */
    -moz-box-shadow: 0 0 10px 5px #000;
    -webkit-box-shadow: 0 0 10px 5px #000;
    box-shadow: 0 0 10px 5px #000;
}


#footerinfo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #999999;
    letter-spacing: 0.08em;
    width: auto;
    height: 17em;
    min-height: auto;
    top: 0em;
    background-color: rgba(0,0,0,0.7);
    margin-right: 1em;
    margin-left: 1em;
    margin-top: 1em;
    margin-bottom: 0.3em;
    overflow: hidden;

    /* shadow attributes */
    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;

    /* radius */
    border-bottom-left-radius: 50px 50px;
    border-bottom-right-radius: 50px 50px;
    position: relative;

}

#footerinfo ul {
    list-style-image: none;
    list-style-type: none;
    float: left;
    padding: 0.5em;
    margin-left: .5em;
    text-align: left;
    margin-bottom: 0em;
    margin-top: 1em;
}

#footerinfo ul li {
    display: block;
    padding-right: 1em;
    padding-left: 0.5em;
    clear: left;
}

.infolink:link, .infolink:visited {
    color: #999999;
    text-decoration: none;
    font-size: 1em;
    text-shadow: 1px 1px 2px #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}  

.infolink:hover {
    color: #eee;
    text-decoration: none;
}

.footertext {
    color: rgba(0,0,0,.7);
    text-decoration: none;
    font-size: 0.8em;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0.3em;
    padding-left: 0.3em;
    text-align: center;
    margin-top: 0.5em;
}

@media all and (max-width: 800px) {
#footer-logo {
    display: none;

}
}

#footeroverlay {
    display: inherit;
    bottom: 4em;
    right: 1em;
    z-index: 9999;
    float: left;
    margin-top: 0.1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0em;
    float: left;
    position: relative;
}

@media all and (max-width: 600px) {
#footeroverlay {
    display: none;
}
}
4

1 回答 1

0 
<script type="text/javascript">
$(document).ready(function() {

  $(".footer-wrapper").mouseenter(
    //on mouseover
    function() {
      $(this).animate({
        height: '+=23%' //adds 23%
        }, 'slow' //sets animation speed to slow
      );
    }).mouseleave(
    //on mouseout
    function() {
      $(this).animate({
        height: '4em' //changes back to 4em
        }, 'slow'
      );
    }
  ).on("touchstart click", function(){
      if(isOpened){
        //code slideUp
      }else{
        //code slideDown
      }
   });
});
</script>

更好地使用 mouseenter mouseleave 事件然后悬停 - 从子元素冒泡存在一些错误。还为移动设备使用触摸事件

于 2013-01-03T16:15:58.493 回答