Question

目前我正在创建一个导航栏，当点击其中一个项目时，它会显示标题或我制作的另一个菜单。

以下是HTML代码：

<header id="nav" class="navbar">
    <nav class="primary clearfix">
        <h1>
            <a href="../index.html" class="logo hide-text">Logo</a>
        </h1>
        <div class="right-align">
            <a href="#" class="collectionsClick" role="button">Collections</a>
            <a href="about.html">About Us</a>
            <a href="contact.html">Contact</a>
        </div>
    </nav>
</header>
<header id="subnav" class="navbar" style="visibility:visible;">
    <nav id="collection-nav" class="primary-collection clearfix" style="display:none;">
        <a href="#">
            <div class="collection-background" style="background-image: url(../img/CCN-088-0425.png)"></div>
            <div class="collectionNavWrap">
                <h3 class="subnavHead">Categories</h3>
                <span role="article" class="caption">View All Categories</span>
            </div>
        </a>
    </nav>
</header>

这是CSS代码：

.navbar#subnav {
    visibility: visible;
}
#subnav #collection-nav.primary-collection {
    display: block;
    background-color: #000000;
    padding: 70px 0 0;
    position: absolute;
    width: 100%;
    z-index: 100;
    transition: top 200ms ease;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}
.reveal {
    top: 0;
    transition: top 200ms ease;
}

#collection-nav.primary-collection a {
    width: 100%;
    height: 100px;
    display: block;
    pointer-events: all;
    opacity: 1;
    color: #ffffff;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 300;
    position: relative;
}
#collection-nav .collection-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: no-repeat 90% 0;
    background-size: 40%;
    opacity: .8;
    transition: 200ms ease;
}
#collection-nav a:hover > .collection-background {
    opacity: 1;
    transition: 200ms ease;
}
#collection-nav .collectionNavWrap {
    height: 100%;
    width: 100%;
    padding: 35px 10px;
    position: relative;

}
#collection-nav .collectionNavWrap .subnavHead {
    display: inline-block;
    margin: 0;
}
#collection-nav .collectionNavWrap span.caption {
    float: right;
}

最后这是我制作的jQuery代码：

$('div.right-align a.collectionsClick').click(function() {
    $('.primary-collection').css('display', 'block');
});

完成此操作后，我尝试通过单击第一个导航栏中的“Collections”项来将显示更改为阻止。但由于某种原因，CSS不想改变。我也尝试通过“.reveal”类添加它，但它仍然做同样的事情，并且不想添加类“.reveal”。我尝试过使用“.on（'click'，function（）{}）;”在jQuery中，结果仍然相同。

有谁知道如何解决这个问题？

为什么这个点击功能不起作用？

0 个答案: