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

Question

I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.

The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.

The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?

The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?

Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/

If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!

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 and CSS are seen in the JSFiddle.

Thank you so much!

UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!

Answer 1

For the second problem, have you tried the :active selector? For example, using part of your CSS code:

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

Answer 2

It looks like there are some issues in your markup. Normally we don't nest ul>a . We normally do ul>li>a .

For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.

Let me know if that works. You might also want to use touch events for mobile (even thought click might work).