双击问题导航

Question

我创建了一个响应式导航菜单，但在平板电脑上，它有 "double tap" 问题。当您点击主标题时，它会在您单击 sub-heading 之前重新加载页面。我已经尝试了一些 jquery plug-ins，但它们使我的导航栏下方的 Flexslider 不显示（我不知道他们是否将其隐藏或发生了什么）。有想法该怎么解决这个吗？谢谢

代码笔：http://codepen.io/caguilera0001/pen/jrBgdG （不幸的是，我的 flex 滑块没有在代码笔中显示）

 $(window).load(function() {
   $('.flexslider').flexslider({
     animation: "slide",
     directionNav: false,
     slideshowSpeed: 4000,
   });
 });


 //to hide the control arrows 
 $('#carousel-home').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 170,
   itemMargin: 5,
   asNavFor: '#slider',
   start: function(slider) {
       //HIDE THE ARROWS BY DEFAULT...
       $('#slider .flex-direction-nav').css({
         visibility: 'hidden'
       });

       //THEN INSERT YOUR CUSTOM JQUERY CLICK ACTIONS TO REVEAL THEM AGAIN
       slider.find('a').on('click', function() {
         $('#slider .flex-direction-nav').css({
           visibility: 'visible'
         });
       });
     } //end start function
 }); //end carousel

 $('#slider').flexslider({
   slidshow: false,
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: true,
   sync: "#carousel-home"
 }); //end slider

a {
  -webkit-transition: color .3s ease;
  -moz-transition: color .3s ease;
  -ms-transition: color .3s ease;
  -o-transition: color .3s ease;
  transition: color .3s ease;
}
a,
a:hover {
  text-decoration: none;
}
#nav {
  margin-left: auto;
  margin-right: auto;
  height: 30px;
  width: 100%;
  position: absolute;
  z-index: 2;
  padding-left: 10%;
  padding-right: 10%;
  box-sizing: border-box;
  /** add this **/
  -moz-box-sizing: border-box;
  /** add this **/
  -webkit-box-sizing: border-box;
  /** add this **/
  -ms-box-sizing: border-box;
  /** add this **/
  background-color: #4484CE;
}
#nav > a {
  display: none;
  z-index: 99;
}
#nav li {
  position: relative;
}
#nav li a {
  color: #fff;
  display: block;
}
/* first level */

#nav > ul {
  height: 30px;
  /* 60 */
  background-color: #93C178;
  list-style: none;
  padding: 0;
}
#nav > ul > li {
  width: 12.5%;
  height: 30px;
  float: left;
}
#nav > ul > li > a {
  height: 30px;
  font-size: 14px;
  line-height: 2.5em;
  /* 60 (24) */
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  display: block;
  color: #FFF;
  border: 1px solid #4484CE;
  text-shadow: 1px 1px 1px #000;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover) > li.active > a {
  background-color: #F9CF00;
}
/* second level */

#nav li ul {
  background-color: #93C178;
  display: none;
  position: absolute;
  top: 100%;
  list-style: none;
  padding: 0;
}
#nav li:hover ul {
  display: block;
  left: 0;
  right: 0;
}
#nav li:not( :first-child):hover ul {
  left: -1px;
}
#nav li ul a {
  font-size: 14px;
  /* 20 */
  text-align: center;
  border-top: 1px solid #4484CE;
  padding: 0.75em;
  /* 15 (20) */
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  display: block;
  color: #FFF;
  border: 1px solid #4484CE;
  text-shadow: 1px 1px 1px #000;
  font-size: 14px;
}
#nav li ul li a:hover,
#nav li ul:not( :hover) li.active a {
  background: #FCFCFC;
  color: #465C8B;
}
////Flexslider Css////
@font-face {
  font-family: 'flexslider-icon';
  src: url('flex slider /fonts/flexslider-icon.eot');
  src: url('flex slider /fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('flex slider /fonts/flexslider-icon.woff') format('woff'), url('flex slider /fonts/flexslider-icon.ttf') format('truetype'), url('flex slider /fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ====================================================================================================================
     * RESETS
     * ====================================================================================================================*/

.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
     * BASE STYLES
     * ====================================================================================================================*/

.flexslider {
  margin: 0;
  padding: 0;
  background: none;
  z-index: 1;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
  width: 100%;
  display: block;
  height: 100%;
}
.flexslider .slides:after {
  content: "[=11=]20";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
     * DEFAULT THEME
     * ====================================================================================================================*/

.flexslider {
  margin: 0px;
  padding-top: 60px;
  padding-left: 150px;
  padding-right: 150px;
  border: 4px solid #4484CE;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  background: none;
  z-index: 1;
}
.flexslider .slides {
  zoom: 1;
}
.flexslider .slides img {
  height: auto;
  -moz-user-select: none;
}
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}
.carousel li {
  margin-right: 5px;
}
.flex-direction-nav {
  *height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  padding-left: 150px;
  padding-right: 150px;
  padding-bottom: 200px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}
.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1;
}
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a.flex-play:before {
  content: '\f003';
}
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: none;
  zoom: 1;
  *display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}
.flex-direction-nav a.flex-next,
.flex-direction-nav a.flex-prev {
  display: none;
}
.flex-direction-nav a.flex-next,
.flex-direction-nav a.flex-next {
  display: none;
}
/* ====================================================================================================================
     * RESPONSIVE
     * ====================================================================================================================*/

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}
@media screen and (max-width: 640px) {
  .flexslider {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a>  <a href="#" title="Hide navigation">Hide navigation</a>

  <ul class="clearfix">
    <li><a href="index.html">Home</a>
    </li>

    <li><a href="/"><span>About Us</span></a>
      <ul>
        <li><a href="principal's_message.html">Principal's Message</a>
        </li>
        <li><a href="mission_and_vision.html">Mission and Vision</a>
        </li>
        <li><a href="our_history.html">Our History</a>
        </li>
        <li><a href="staff_directory.html">Staff Directory</a>
        </li>
        <li><a href="links.html">Links</a>
        </li>
        <li><a href="photo_gallery.html">Photo Gallery</a>
        </li>
      </ul>
    </li>

    <li> <a href="/"><span>School Offices</span></a>
      <ul>
        <li><a href="attendance_office.html">Attendance</a>
        </li>
        <li><a href="counseling_office.html">Counseling</a>
        </li>
        <li><a href="main_office.html">Main</a>
        </li>
        <li><a href="magnet_office.html">Magnet</a>
        </li>
        <li><a href="bridge_office.html">Bridge</a>
        </li>
        <li><a href="english_learner's_office.html">EL</a>
        </li>
        <li><a href="itd_office.html">ITD</a>
        </li>
        <li><a href="library.html">Library</a>
        </li>
        <li><a href="parent_center.html">Parent Center</a>
        </li>
        <li><a href="nurse's_office.html">Nurse</a>
        </li>
        <li><a href="safety_ofifice.html">Safety</a>
        </li>
        <li><a href="plant_manager's_office.html">Plant Manager</a>
        </li>
        <li><a href="cafeteria.html">Cafeteria</a>
        </li>
        <li><a href="student_store.html">Student Store</a>
        </li>
      </ul>
    </li>

    <li> <a href="/"><span>Academics</span></a>
      <ul>
        <li><a href="classes_homework.html">Classes/Homework</a>
        </li>
        <li><a href="culmination_requirements.html">Culmination</a>
        </li>
        <li><a href="departments.html">Departments</a>
        </li>
        <li><a href="counseling_office.html">Counseling</a>
        </li>
        <li><a href="library.html">Library</a>
        </li>
      </ul>
    </li>

    <li> <a href="/"><span>Programs</span></a>
      <ul>
        <li><a href="http://www.bancroftib.weebly.com" target="new">IB</a>
        </li>
        <li><a href="middle_years_programme.html">The Middle Years</a>
        </li>
        <li><a href="ste[+a]m_program.html">STE[+a]M</a>
        </li>
        <li><a href="performing_arts_program.html">Performing Arts</a>
        </li>
        <li><a href="vei-jv.html">VEI-JV</a>
        </li>
        <li><a href="gate_sas_program.html">GATE/SAS</a>
        </li>
        <li><a href="http://lacerstars.org/" target="new">LACER</a>
        </li>
      </ul>
    </li>

    <li> <a href="/"><span>Students</span></a>
      <ul>
        <li><a href="cougar_news.html">Cougar News</a>
        </li>
        <li><a href="bell_schedule.html">Bell Schedule</a>
        </li>
        <li><a href="classes_homework.html">Classes/Homework</a>
        </li>
        <li><a href="dress_code.html">Dress Code</a>
        </li>
        <li><a href="cougar_code.html">Cougar Code</a>
        </li>
        <li><a href="attendance_policy.html">Attendance Policy</a>
        </li>
        <li><a href="culmination_requirements.html">Culmination</a>
        </li>
        <li><a href="http://www.bancroftib.weebly.com/learner-profile.html" target="new">IB Learner Profile</a>
        </li>
        <li><a href="http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">Student Handbook</a>
        </li>
        <li><a href="library.html">Library</a>
        </li>
        <li><a href="map.html">Map</a>
        </li>
        <li><a href="http://achieve.lausd.net/site/default.aspx?PageType=3&ModuleInstanceID=1555&ViewID=7B97F7ED-8E5E-4120-848F-A8B4987D588F&RenderLoc=0&FlexDataID=16590&PageID=845" target="new">Food Menu</a>
        </li>
        <li><a href="student_store.html">Student Store</a>
        </li>
        <li><a href="http://www.bancroftmiddleschool.org/2015-16yearbook/index.html" target="new">Yearbook</a>
        </li>
      </ul>
    </li>

    <li> <a href="/"><span>Parents</span></a>
      <ul>
        <li><a href="parent_bulletin.html">Parent Bulletin</a>
        </li>
        <li><a href="cougar_news.html">Cougar News</a>
        </li>
        <li><a href="parent_center.html">Parent Center</a>
        </li>
        <li><a href="calendar.html">Calendar</a>
        </li>
        <li><a href="bell_schedule.html">Bell Schedule</a>
        </li>
        <li><a href="classes_homework.html">Classes/Homework</a>
        </li>
        <li><a href="culmination_requirements.html">Culmination</a>
        </li>
        <li><a href="http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">District Handbook</a>
        </li>
        <li><a href="school_site_council.html">SSC Council</a>
        </li>
        <li><a href="school_decision_making_council.html">SDM Council</a>
        </li>
        <li><a href="elac.html">ELAC</a>
        </li>
        <li><a href="contact_teachers.html">Contact Teachers</a>
        </li>
      </ul>
    </li>

    <li><a href="contact.php">Contact Us</a>
    </li>

  </ul>
</nav>

Answer 1

看看这篇文章：CSS-only Dropdowns with the Checkbox Hack。如果您可以将主标题更改为复选框并使用文章中描述的技术，您将消除移动设备上的 "double-tap" 问题。

如果您不想强迫用户单击主标题以获取 "desktop mode" 中的 drop-down，您也可以在 CSS :hover 中工作，但是让他们将鼠标悬停。请确保将其包装在媒体查询中，这样它就不会被移动浏览器拾取并可能再次导致 "double-tap" 问题！

Answer 2

父 <li> 中锚点的 href 似乎导致了问题。如您所见，使用 href="/" 会重新加载页面。当我有子导航时，我使用 href="#"。这会导致另一个问题（虽然可以修复！）：clicking/touching 它将带您到当前页面的顶部。然而，一点点 jQuery 就可以解决这个问题：

$('.has-subnav a').on('click touchstart', function(e){
    e.preventDefault();
});

对于您的子导航，我建议在父级 <li> 上放置一个 class 并将 href="/" 更改为 href="#":

<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>

<ul class="clearfix">
    <li><a href="index.html">Home</a></li>

    <li class="has-subnav"><a href="#"><span>About Us</span></a>
        <ul>
        <li><a href="principal's_message.html">Principal's Message</a></li> 
        <li><a href= "mission_and_vision.html">Mission and Vision</a></li> 
        <li><a href= "our_history.html">Our History</a></li> 
        <li><a href= "staff_directory.html">Staff Directory</a></li> 
        <li><a href= "links.html">Links</a></li> 
        <li><a href= "photo_gallery.html">Photo Gallery</a></li> 
</ul>
</li>
... etc

如果您要查找有关上述 jQuery 片段的更多信息，you can read the jQuery docs here about the Event Object。在上面的示例中，事件对象由 function(e)... 中的 e 引用。

双击问题导航

Double Tap Issue Navigation

html

css

nav

responsive-design

flexslider