javascript - Javascriptを使用してタッチでdivをクリック可能にする方法は?

Question

ページの下部に固定フッターがあり、マウスオーバーすると 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;
}
}