Question

我有一个页眉和页脚，当用户在桌面上并且有鼠标并且可以将鼠标悬停在它们上面并以这种方式导航时，它们可以完美地工作。

在没有鼠标的情况下，问题出在移动设备上，我需要所有工作都与在台式机上进行的工作差不多。单击和“连接”下拉菜单时，我几乎都能按自己的喜好使“项目”下拉菜单起作用，但是我遇到了两个问题。

我遇到的第一个问题是单击“项目”或“连接”下拉菜单/下拉菜单时，当我单击它们或再次单击它们时，下拉菜单/下拉菜单没有消失了。它变成了不断显示的块，我需要返回显示：当用户单击其他任何地方或再次单击“项目” /“连接”时，没有显示。我以为我正在使用的脚本中的“ else”语句可以完成该操作，但是显然它不起作用，我不确定为什么！使该工作最佳的方法是什么？

我遇到的第二个问题是，当用户单击“ PROJECTS”中的li项目“ ONE”或“ CONNECT”中的任何li项目时，我需要clicked元素的背景变成黑色，并且加载链接之前，文本会变成白色（类似于使用：hover css在桌面版本上的外观）。此时，当单击它们时，它只是在元素上闪烁灰色突出显示的颜色一秒钟。我尝试添加相同类型的CSS，但是将“悬停”更改为“焦点”或“访问”，但我都无法工作。最好的方法是什么？

这是所有代码的JSFiddle：http://jsfiddle.net/xmdzg8vu/

如果您在台式机上查看JSFiddle，则很难看到我遇到的问题，因为您有鼠标并且可以悬停...希望代码可以帮助发现我的错误！

HTML：

<div id="background"></div>
<header id="header">
  <div id="nav">
    <ul>
      <li id="projects" onclick="displayDropdown()">
        PROJECTS
        <ul>
          <a href="/one" class="blocklink" target="_self">
            <li id="one">ONE</li>
          </a>
        </ul>
      </li>
    </ul>
  </div>
</header>
<footer id="footer">
  <div id="footer-nav">
    <ul>
      <li id="connect" onclick="displayDropup()">
        CONNECT
        <ul>
          <a href="https://www.instagram.com/" target="_blank" class="blocklink">
            <li id="instagram">
              INSTAGRAM
            </li>
          </a>
          <a href="https://twitter.com/" target="_blank" class="blocklink">
            <li id="twitter">
              TWITTER
            </li>
          </a>
          <a href="mailto:mail@mail.com" class="blocklink">
            <li id="email">
              EMAIL
            </li>
          </a>
        </ul>
      </li>
    </ul>
  </div>
</footer>

JS和CSS在JSFiddle中可见。

非常感谢您！

更新：我已经更新了JSFiddle，以删除不适用于此问题的额外脚本。希望可以将其清理干净！

Answer 1

对于第二个问题，您是否尝试过 ：active 选择器？例如，使用部分CSS代码：

#one:focused, #one:visited, #one:hover, #one:active {
    background-color: black;
    color: white;
}

Answer 2

您的标记中似乎有一些问题。通常我们不嵌套Get-Module AzureRM.HDInsight。我们通常会进行$httpUserName = "joyhd" $clusterpassword = ConvertTo-SecureString "<password>" -AsPlainText -Force $httpCredential = New-Object System.Management.Automation.PSCredential($httpUserName, $clusterpassword) $SshCredential = New-Object System.Management.Automation.PSCredential($httpUserName, $clusterpassword) $storageAccountName = "<storageAccountName>" $storageAccountKey = "xxxxxxx" $storageContainer = "testhd" New-AzureRmHDInsightClusterConfig ` | Add-AzureRmHDInsightComponentVersion ` -ComponentName "Spark" ` -ComponentVersion "2.1" ` | New-AzureRmHDInsightCluster ` -ClusterName joytesthd ` -ClusterType "Spark" ` -ClusterSizeInNodes 4 ` -HttpCredential $httpCredential ` -Location "eastus" ` -OSType Linux ` -ResourceGroupName joywebapp ` -DefaultStorageAccountName "$storageAccountName.blob.core.windows.net" ` -DefaultStorageAccountKey $storageAccountKey ` -DefaultStorageContainer $storageContainer ` -SshCredential $SshCredential。

对于问题1，您可以在子菜单中添加ul>a事件处理程序，以在单击子菜单项时关闭下拉菜单（/ dropup）ul。

让我知道是否可行。您可能还想将触摸事件用于移动设备（甚至认为ul>li>a可能会起作用）。

在移动设备上单击时，更改背景元素的背景颜色和文本颜色

2 个答案: