javascript - 响应式导航在移动设备上的表现不尽如人意

标签 javascript jquery html css responsive-design

我正在尝试在我正在处理的网站的页脚中创建一个下拉式垂直导航。它有点适用于台式机。 But on the iPhone I'm testing the media query, when a sublink is selected, it choose the main link "below"it and opens up that link's submenu. 我的 HTML CSS 和 JS 如下:

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrapper">
    <div id="sidebar">
    </div>
    <div id="main">
    <div id="content">
    <div id="header">
    <nav id="headernav">
        <ul>    
<li><a href="#about">|&ensp;About&ensp;|</a>
   <ul>
      <li><a href="mission/">Mission Statement</a></li>
      <li><a href="#history">History</a>
         <ul>
            <li><a href="first50/">First 50 Years</a></li>
            <li><a href="next20/">Last 20 Years</a></li>
            <li><a href="recent/">2002 - Present</a></li>
         </ul>
      </li>
      <li><a href="districts_map.pdf">District Map</a></li>
      <li><a href="board/">Board of Directors</a></li>
   </ul>
</li>
<li><a href="#members">&ensp;Members&ensp;|</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="section/">Member Section</a></li>
      <li><a href="jobbank.iphtml">Job Bank</a></li>
      <li><a href="#newsletter">Newsletter</a>
         <ul>
            <li><a href="summer/">Current Issue</a></li>
            <li><a href="newsletters/">Archived Issue</a></li>
         </ul>
      </li>
      <li><a href="bylaws.doc">Bylaws</a>
      <li><a href="members/">Sign In</a></li>
      <li><a href="dues/index.iphtml">Pay Dues</a></li>
      <li><a href="forgotten_password.iphtml">Password Recovery</a></li>
      <li><a href="addresschange.iphtml">Change my Contact Information</a></li>
      <li><a href="links/">Links to Other Subspecialty Groups</a></li>
   </ul>
</li>
<li><a href="#join">&ensp;Join&ensp;|</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="join.pdf">Membership Application</a></li>
   </ul>
</li>
<li><a href="#news">&ensp;Legislative News&ensp;|</a>
   <ul>
      <li><a href="resources/">Resources</a></li>
      <li><a href="other.iphtml">Other</a></li>
   </ul>
</li>
<li><a href="#meetings">&ensp;Meetings&ensp;|</a>
   <ul>
      <li><a href="upcoming/">Upcoming</a>
      <li><a href="past/">Past</a>
      <li><a href="exhibitors.iphtml">Exhibitors</a>
   </ul>
</li>
<li><a href="findadoc/">&ensp;Find A Doc&ensp;|</a></li>
    </ul>
    </nav>
    <br /><br /><br /><br />
</div>
<!-- Page Content -->
<div id="mobilenavlink">Click <a href="#mnav">here</a> for site navigation</div>
<hr> 

<div id="footer">    
<br />
<p style="visibility:hidden;"><a id="mnav">Site Navigation</a></p>

<div id="footer">    
    <br />
<p style="visibility:hidden;"><a id="mnav">Site Navigation</a></p>
<div id="header2">
<nav id="mobilenav" role="navigation">
<a href="#mobilenav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>    
<li><a href="?about">&ensp;About&ensp;</a>
   <ul>
      <li><a href="mission/">Mission Statement</a></li>
      <li><a href="?history">History</a>
         <ul>
            <li><a href="first50/">First 50 Years</a></li>
            <li><a href="last20">Last 20 Years</a></li>
            <li><a href="recent/">2002 - Present</a></li>
         </ul>
      </li>
      <li><a href="map.pdf">District Map</a></li>
      <li><a href="board/">Board of Directors</a></li>
   </ul>
</li>
<li><a href="?members">&ensp;Members&ensp;</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="member_section.iphtml">Member Section</a></li>
      <li><a href="jobbank.iphtml">Job Bank</a></li>
      <li><a href="?newsletter">Newsletter</a>
         <ul>
            <li><a href="summer/">Current</a></li>
            <li><a href="newsletters/">Archived</a></li>
         </ul>
      </li>
      <li><a href="bylaws.doc">Bylaws</a>
      <li><a href="members/">Sign In</a></li>
      <li><a href="dues/index.iphtml">Pay Dues</a></li>
      <li><a href="forgotten_password.iphtml">Password Recovery</a></li>
      <li><a href="addresschange.iphtml">Change Account</a></li>
      <li><a href="links/">Subspecialty Groups</a></li>
   </ul>
</li>
<li><a href="?join">&ensp;Join&ensp;</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="join.pdf">Membership Application</a></li>
   </ul>
</li>
<li><a href="?news">&ensp;Legislative News&ensp;</a>
   <ul>
      <li><a href="resources/">Resources</a></li>
      <li><a href="Orthe.iphtml">Other</a></li>
   </ul>
</li>
<li><a href="?meetings">&ensp;Meetings&ensp;</a>
   <ul>
      <li><a href="upcoming/">Upcoming</a>
      <li><a href="past/">Past</a>
      <li><a href="exhibitors.iphtml">Exhibitors</a>
   </ul>
</li>
<li><a href="findadoc/">&ensp;Find A Doc&ensp;</a></li>
</ul>
</nav>
</div>

</div></div>

<script src="jquery.js"></script>
<script src="doubletaptogo.js"></script>
<script>
$( function()
   {
      $( '#mobilenav li:has(ul)' ).doubleTapToGo();
   });
</script>
</body>
</html>

CSS:

body {
  font-family: arial, sans-serif;
  text-align: left;
  background-color: #000000;
  background-image: url(./images/background.jpg);
  background-repeat: repeat-y;
  margin-top: 10px;
  margin-bottom: 10px;
}

table {
  background-color: #ffffff;
  border:double;
  border-width:4px;
  border-collapse:collapse;
  max-width:100%;
}

p {
/*  text-align: left; */
  font-family: arial, sans-serif;
}

em {
/*  text-align: left; */
  font-family: arial, sans-serif;
}

li {
/*  text-align: left; */
  font-family: arial, sans-serif;
}

hr {
/*  visibility:hidden; */
}

img {
  max-width:100%;
  height:auto;
}


/*MAIN THEME COMPONENTS*/
#wrapper {
  display: block;
/*  border: 1px #a2a2a2 solid; */
  width: auto;
  margin: 0; 
  padding: 0 15px;
}

#header {
  width:auto;
  margin-left: auto; 
  margin-right: auto;
/*  margin-left: 230px; 
  margin-right: 0; */
}


#mobilenavlink{
  display:none;
}


#main {
  margin: 10px auto 0 210px; 
  background-color: white;
  border: ridge 4px;
  border-radius: 4px;
  width: auto;
}

#content {
  width: auto;
  padding:  2%;
}

#content img{
  border:0;
}

#sidebar {
  float:left;
  width: 190px;
  color: white;
  font: bold 2em;
  margin-top: 0;
}

#sidebar img{
  border:0;
}

#delimiter {
  clear: both;
}

#footer {
  width: auto;
  background-color: #28377a;
  color: white;
}

/*ORIGINAL NAV STYLING FOR HEADER NAV */
#headernav {
  font-size: 20px;
  white-space:nowrap;
  float:left;
  margin-right:-999em;
}

#headernav ul ul {
  display: none;
}

#headernav ul li:hover > ul {
  display: block;
}

#headernav ul {
  background: #22629e;
  background: linear-gradient(to bottom, #CCE2F5, #22629e);
  /*  background: -ms-linear-gradient(top,  #CCE2F5 0%,#22629e 60%); */
  background: -moz-linear-gradient(top, #CCE2F5 0%, #22629e 60%);
  background: -webkit-linear-gradient(top, #CCE2F5 0%,#22629e 60%);
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 5px;
  border-radius: 4px;
  list-style: none;
  position: relative;
  display: inline-table;
  }

#headernav ul:after {
  content: "";
  clear: both;
  display: block;
}

#headernav ul li {
  float: left;
}

#headernav ul li:hover {
  background: #194976;
  background: linear-gradient(top, #22629e 0%, #112F4B 40%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 40%);
}

#headernav ul li:hover a {
  color: #ffffff;
}

#headernav ul li a {
  display: block;
  padding: 5px 0px;
  color: #eeeeee;
  text-decoration: none;
}

#headernav ul ul {
  background: #112F4B;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}

#headernav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}

#headernav ul ul li a {
  padding: 5px 5px;
  color: #fff;
}

#headernav ul ul li a:hover {
  background: #112F4B;
  background: linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 100%);
}

#headernav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/*NEW NAV STYLING FOR MOBILE/FOOTER NAV */
#mobilenav {
  font-size: 20px;
  white-space:nowrap;
  float:left;
  margin-right:-999em;
}

#mobilenav ul ul {
  display: none;
}

#mobilenav ul li:hover > ul {
  display: block;
}

#mobilenav ul {
  background: #22629e;
  padding: 0 5px;
  list-style: none;
  position: relative;
  display: inline-table;
}

#mobilenav ul:after {
  content: "";
  clear: both;
  display: block;
}

#mobilenav ul li {
  float: left;
}

#mobilenav ul li:hover {
  background: #194976;
  background: linear-gradient(top, #22629e 0%, #112F4B 40%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 40%);
}

#mobilenav ul li:hover a {
  color: #ffffff;
}

#mobilenav ul li a {
  display: block;
  padding: 5px 0px;
  color: #eeeeee;
  text-decoration: none;
}

#mobilenav ul ul {
  background: #112F4B;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}

#mobilenav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}

#mobilenav ul ul li a {
  padding: 5px 5px;
  color: #fff;
}

#mobilenav ul ul li a:hover {
  background: #112F4B;
  background: linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 100%);
}

#mobilenav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

#mobilenav {
  font-size: 20px;
  white-space:nowrap;
}

#mobilenav ul ul {
  display: none;
}

#mobilenav > a {
  display: none;
}

#mobilenav li {
  position: relative;
}

/* first level */
/*COMMENTING ORIGINAL MOBILE NAV CODE
#mobilenav > ul {
/*  height: 3.75em; */
}
/*COMMENTING ORIGINAL MOBILE NAV CODE
#mobilenav > ul > li {
  width: 25%; 
  height: 100%;
  float: left;
}

/* second level */
/*COMMENTING ORIGINAL MOBILE NAV CODE
#mobilenav li ul {
  display: none;
  position: absolute;
  top: 100%;
}

#mobilenav li:hover ul {
  display: block;
}*/


/*MEDIA QUERIES BELOW*/
@media only screen and (min-width : 320px) and (max-width : 480px) {
  /* iPhone2G-4S */

  #sidebar {
    display: none;
  }

  #content {
    width: auto;
    padding: 2%;
    margin-left: 0px;
  }

  #wrapper {
    display: block;
    width: auto;
    margin: auto;
    padding: 0 15px;
  }

  #main {
    margin: 10px 0 0 10px;
    background-color: white;
    border: ridge 4px;
    border-color: #5b2542;
    width: auto;
  }

  #header2 {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    display:block;
  }

  #header {
    display:none;
  }

  #footer{
    height:auto;
  }

  #mobilenavlink{
    display:block;
  }

  /*MOBILE NAV TEST*/

  #mobilenav {
    display:block;
    position: relative;
    top: auto;
    left: auto;
  }

  #mobilenav > a {
    background-color: #e15a1f;
    position: relative;
  }

  #mobilenav > a:before,
  #mobilenav > a:after {
    position: absolute;
    border: 2px solid #fff;
    content: '';
  }

  #mobilenav > a:after {
    top: 60%;
  }

  #mobilenav:not( :target ) > a:first-of-type,
  #mobilenav:target > a:last-of-type {
    display: block;
  }

  /* first level */

  #mobilenav > ul {
    height: auto;
    display: none;
    position: absolute;
  }

  #mobilenav:target > ul {
    display: block;
  }

  #mobilenav > ul > li {
    width: 100%;
    float: none;
  }

  #mobilenav > ul > li > a {
    height: auto;
    text-align: left;
  }

  #mobilenav > ul > li:not( :last-child ) > a{
    border-right: none;
    border-bottom: 1px solid #000000;
  }

  /* second level */

  #mobilenav li ul {
    position: static;
    padding-top: 0;
  } 

  /*END MOBILE NAV TEST*/      
}

JS:

;(function( $, window, document, undefined )
{
$.fn.doubleTapToGo = function( params )
{
    if( !( 'ontouchstart' in window ) &&
        !navigator.msMaxTouchPoints &&
        !navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) )    
return false;

    this.each( function()
    {
        var curItem = false;

        $( this ).on( 'click', function( e )
        {
            var item = $( this );
            if( item[ 0 ] != curItem[ 0 ] )
            {
                e.preventDefault();
                curItem = item;
            }
        });

        $( document ).on( 'click touchstart MSPointerDown', function( e )
        {
            var resetItem = true,
                parents   = $( e.target ).parents();

            for( var i = 0; i < parents.length; i++ )
                if( parents[ i ] == curItem[ 0 ] )
                    resetItem = false;

            if( resetItem )
                curItem = false;
        });
    });
    return this;
};
})( jQuery, window, document );

顶部的主标题按我希望的方式工作。但是我用于响应式导航的代码来自不同的样式，我不确定如何改进它。 我已经编码了大约半年，所以我知道可能有更好的方法来做这些事情，如果我的代码充满了不必要的冗余，我提前道歉。 谢谢。

编辑:如果有帮助，这里是该站点的链接: http://vos.societyhq.com/ 我应该补充一点，我将为其他屏幕宽度添加媒体查询，但我想从(旧的)iPhone 分辨率开始，并首先让它正常工作。

最佳答案

你在使用 JQuery 吗？

如果是这样，您只需在点击(或悬停)时调用函数并传递要展开的列表的 ID。

JQuery:

function showHideNav(elID){
    $("#" + elID).toggle();
}

HTML

<li onclick="showHideNav(dropdown1)">about
  <ul id="dropdown1">
    ...
  </ul>
</li>

关于javascript - 响应式导航在移动设备上的表现不尽如人意，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18514325/

上一篇：javascript - 在 fabric.js 中更改对象的选择样式

下一篇：css - 如何在 IE9 中实现响应式 Canvas 高度

相关文章：

javascript - 添加和删​​除类以单击动态按钮

javascript - trim 函数结果

javascript - 如何显示从 Zebra Datepicker 中选择的两个日期中选择的天数？

mysql - 使用 HTML5 localstorage 作为主要数据源

java servlet下载特定目录中的文件

javascript - 背景颜色从下到上悬停动画

javascript - 如何将 Object.keys().map() 函数中的参数设置为新对象中的键？

javascript - JQuery中 "and '个字符的区别

javascript - 当用户在元素外部单击时隐藏元素

html - Id a div 有一个特定类别的孙子

©2024 IT工具网  联系我们