Question

建立我的第一个网站，所以请耐心等待我。我在点击特定的li时试图隐藏/显示列表项图标，我知道如何使用CSS3来解决这个问题，但我想使用jQuery。有什么提示吗？

这是我的HTML代码：

<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>

和我的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

好像您正在询问如何切换icon课程。

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

您需要在HTML标记之后在<script>标记中实现此功能，或者您需要将其包装在document.ready函数中以在标记具有时运行它已被渲染。

将来，请先询问并告诉我们什么不起作用。 jQuery文档非常容易理解。

Answer 2

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

Answer 3

您可以使用原生HTML5执行此操作。目前在所有主流浏览器中都不支持此功能，但有些填充功能可以将该功能植入到尚不支持它的浏览器中。

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

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

3 个答案: