javascript - CSS3 Selector That Works like jQuery's .click()? - Stack Overflow

admin管理员组

文章数量:1313314

I've been using a pure CSS navigation for a few years now, and lately we've started building a bunch of mobile sites at the pany I work for. I'd really like to keep using pure CSS, and note rely on jQuery, but on a mobile site, drop down menu's don't work correctly.

Is there something similar to jQuery's .click(); event in CSS3? Basically, when a user clicks on a navigation link, I want the drop down to open and stay open. I've tried looking around, but I can't seem to find anything.

I've been using a pure CSS navigation for a few years now, and lately we've started building a bunch of mobile sites at the pany I work for. I'd really like to keep using pure CSS, and note rely on jQuery, but on a mobile site, drop down menu's don't work correctly.

Is there something similar to jQuery's .click(); event in CSS3? Basically, when a user clicks on a navigation link, I want the drop down to open and stay open. I've tried looking around, but I can't seem to find anything.

• javascript
• jquery
• css
• css-selectors

Share Improve this question Follow edited Jun 20, 2013 at 15:47 BoltClock 725k165165 gold badges1.4k1.4k silver badges1.4k1.4k bronze badges asked Jun 20, 2013 at 15:21 JacobTheDevJacobTheDev 18.6k2929 gold badges102102 silver badges161161 bronze badges 2

• Can you amend the html at all? – David Thomas Commented Jun 20, 2013 at 15:25
• I could, right now it's a basic <ul> structure. – JacobTheDev Commented Jun 20, 2013 at 15:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You could use the :target selector for some basic functionality. See Chris Coyier's post about it. Note, brower support.

EDIT: Made a quick demo

Given some basic HTML structures, you can recreate the toggle (show/hide) capacities of JavaScript implementations:

Using :target:

HTML:

<nav id="nav">
    <h2>This would be the 'navigation' element.</h2>
</nav>
<a href="#nav">show navigation</a>
<a href="#">hide navigation</a>

CSS:

nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
nav:target {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS Fiddle demo.

Using :checked:

HTML:

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>

CSS:

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    cursor: pointer;
}

JS Fiddle demo.

Unfortunately the closest alternative native CSS has, to a ':clicked' selector is the :active or :focus pseudo-classes, the first selector of which will cease to match once the mouse-button is released, the second of which will cease to match once the given element is no longer focused (by either keyboard or mouse focusing elsewhere in the document).

Updated the demos, to allow for toggling the text of the label (using CSS generated content):

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    display: inline-block;
    cursor: pointer;
}

#switch ~ label::before {
    content: 'Show ';
}

#switch:checked ~ label::before {
    content: 'Hide ';
}

JS Fiddle demo.

References:

• :checked (patibility).
• :target (patibility).

Try the :active psuedo-class. It's not pletely bulletproof, but you should be able to get at least some basic functionality from it.

Try something like this in your CSS Code...

  selector:hover, selector:active {
     display:block;
     height:100px;//test
     width:200px; //test
     border:solid 1px #000; //test
    }

本文标签： javascriptCSS3 Selector That Works like jQuery39s click()Stack Overflow