javascript - 混淆移动用户可点击的下拉菜单

Question

嘿，我在让我的下拉菜单可点击时遇到了一些问题。在悬停状态下一切正常，但我希望移动用户可以点击它。请查看我的代码任何帮助将不胜感激。我想为使用 PC 的人保持悬停状态，但也希望点击对移动设备有效。

非常感谢山姆

$(document).ready(function() {
		$('.topnav').click(function() {
			$('.sub-nav').toggleClass('visible');
		});
	});

.subnav ul.sub-nav{
  display: none;
}

.subnav ul.visible {
  display: block;
}

#headernav .tile:hover a{
  background-color:#fff;
  border-radius: 0 0 5px 5px;
  -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  -webkit-transition:0.5s ease-in;
  -moz-transition:0.5s ease-in;
  -o-transition:0.5s ease-in;
}

#headernav .abouttile {
  width:13%;
  float: left;
  margin:0 3%;
  transition:0.5s ease-out;
  -webkit-transition:0.5s ease-out;
  -moz-transition:0.5s ease-out;
  -o-transition:0.5s ease-out;

}

#headernav .abouttile:hover{
  background-color:#fff;
  border-radius: 0 0 5px 5px;
  padding-bottom:10%;
  -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  -webkit-transition:0.5s ease-in;
  -moz-transition:0.5s ease-in;
  -o-transition:0.5s ease-in;
}
#headernav .projecttile {
  width:13%;
  float: left;
  margin:0 3%;
  transition:0.5s ease-out;
  -webkit-transition:0.5s ease-out;
  -moz-transition:0.5s ease-out;
  -o-transition:0.5s ease-out;

}

#headernav .projecttile:hover{
  background-color:#fff;
  border-radius: 0 0 5px 5px;
  padding-bottom:16%;
  -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
  -webkit-transition:0.5s ease-in;
  -moz-transition:0.5s ease-in;
  -o-transition:0.5s ease-in;
}

#headernav .subnav ul{
  display:none;
  position: absolute;
  border-radius: 0 0 5px 5px;
  list-style-type: none;
  padding:0.5%;
  width:auto;
  margin: 1.8% 0 0 0;
}

#headernav .subnav:hover ul{
  display:block;
}

#headernav .subnav ul li{
  background-color:transparent;
  width:100%;
  font-size:0.8em;
  line-height: 1.6;
  -webkit-transition:0.5s ease-out;
  -moz-transition:0.5s ease-out;
  -o-transition:0.5s ease-out;
}

#headernav .subnav ul li:hover{
  opacity: 0.8;
  text-decoration: underline;
  font-weight:bold;
  -webkit-transition:0.5s ease-in;
  -moz-transition:0.5s ease-in;
  -o-transition:0.5s ease-in;
}

.current{
    width:auto;
    padding: 5% 9%;
    margin: 0 18%;
    color:#222222;
    float:left;
    border-radius: 0 0 5px 5px;
    -webkit-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
    -moz-box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
    box-shadow: -1px -1px 4px 2px rgba(0,0,0,0.51);
    font-weight: bold;
    background-color: #fff;
}

.topnav{
  color:#222222;
  text-decoration: none;
  font-weight: bold;
  color:#222222;
  padding: 5% 9%;
  margin: 0 2%;
  float:left;
  -webkit-transition:0.5s ease-out;
  -moz-transition:0.5s ease-out;
  -o-transition:0.5s ease-out;
}

.currenttile{
  width:18%;
  float: left;
  height:auto;
  margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

<div class="headerlogo">
	<img src="images/logo3.png">

</div>

<div id="headernav">

    <div class="currenttile">
        <a class="current" href="index.html">Home</a>
    </div>  
    <div class="abouttile">
      <div class="subnav">  
        <div class="topnav" href="about.html">About Us</div>
          <ul class="sub-nav">
            <a href="#"><li>The Organisation</li></a>
            <a href="#"><li>Our Goals</li></a>
            <a href="#"><li>Acheivements</li></a>
            <a href="#"><li>Partnerships</li></a>
          </ul>
      </div>  
    </div>
    <div class="projecttile">
      <div class="subnav">
        <div class="topnav" href="projects.html">Projects</div>
          <ul class="sub-nav">
            <a href="#"><li>Fuel Poverty</li></a>
            <a href="#"><li>Carers</li></a>
            <a href="#"><li>Education</li></a>
            <a href="#"><li>Sensory Garden</li></a>
            <a href="#"><li>Prayer Sessions</li></a>
            <a href="#"><li>Capacity Buildings</li></a>
            <a href="#"><li>Mental Health</li></a>
          </ul>
      </div>
    </div>
    <div class="tile">
      <div class="subnav">
        <a class="topnav" href="services.html">Services</a>
          <ul>
          
          </ul>
      </div>
    </div>
    <div class="tile">
      <a class="topnav" href="contact.html">Contact Us</a>
    </div>
</div>

</div>
</div>

Answer 1

$(document).ready(function() {
        $('.topnav').click(function() {
            $('.sub-nav').toggle();
        });
    });

这应该可以解决问题