双击问题导航

Question

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

Codepen： 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: "\\0020"; 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 。 如果您可以将主要标题更改为复选框并使用文章中描述的技术，您将消除移动设备上的“双击”问题。

如果您不想强制用户单击主标题以在“桌面模式”中获取下拉菜单，而是让他们将鼠标悬停在鼠标上，您也可以在 CSS 中工作:hover 。 只需确保将其包装在媒体查询中，这样它就不会被移动浏览器选中，并可能再次导致“双击”问题！

Answer 2

看起来父<li>锚点的href引起了问题。 如您所见，使用href="/"会重新加载页面。 当我有子导航时，我使用href="#" 。 这会导致另一个问题（虽然可以修复！）：单击/触摸它会将您带到当前页面的顶部。 但是，一点点 jQuery 将解决这个问题：

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

对于您的子导航，我建议在父<li>上放置一个类并将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 代码段的更多信息，您可以在此处阅读有关 Event Object 的 jQuery 文档。 在上面的示例中，事件对象由function(e)...的e引用。