使用jQuery单击时显示/隐藏li图标

Question

Building my first website, so please be patient with me. I'm trying to hide/show list item icon when clicked on the particular li, I know how to go around this using CSS3, but I would like to do use jQuery. Any tips?

Here is my html code:

<ul id="nav" class="grid_1 push_3"> 
    <li class="icon"><a href="#">Home</a></li>
    <li class="icon"><a href="#">Gallery</a></li>
    <li class="icon"><a href="#">Recipies</a></li>
    <li class="icon"><a href="#">Contact</a></li>
</ul>

and my CSS:

ul {
    list-style-type: none;
    padding: 0;
    margin-top:2%;
}

ul li{
    font-family: 'cheveuxdangemedium', Georgia, Serif;
    font-size: 1em;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #bec4b8;
    text-align: left;
    text-transform: uppercase;
    margin-left: -0.4em;
}

li.icon {
    list-style-image: url("../images/greanleaf.png");
    width: 100%;
    margin-bottom: -0.1em;
}

Answer 1

It appears as though you're asking how to toggle the icon class.

$('#nav li').click(function() {
    $(this).addClass('icon').siblings('li').removeClass('icon');
});

• http://api.jquery.com/click
• http://api.jquery.com/addClass
• http://api.jquery.com/siblings

You'll need to implement this in a <script> tag after your HTML markup, or you'll need to wrap it in a document.ready function to run it when the markup has been rendered.

In the future, please do make an effort before asking and show us what's not working. The jQuery docs are very easy to follow.

Answer 2

$('#nav li').on('click', function() {
    $(this).toggleClass('icon')
});

Answer 3

You can do this with native HTML5. This isn't yet supported in all major browsers, but there are polyfills that can implant that functionality into browsers that don't yet support it.

<details>
  <summary>Click here</summary>
  <p>Now this shows.</p>
</details>