Question

我试图在我的设计上模仿这个：http://jsfiddle.net/AYRh6/26/ 但它不起作用，我在代码中找不到任何可能阻止它的东西。必须说我正在使用代码进行切换效果。

非常感谢任何帮助。

我的HTML是：

    <div id="category">
         <section id="pushOne" class="slidebox">
        <div class="toggle">
            <a class="bot" href="#"><img src="01.png" alt="Category 1"/></a>
                <a class="top" href="#pushOne"><img src="01.png" alt="Category 1"/></a>
        </div>
        <div class="box"><h2>Category 1</h2>   
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis    aliquet odio, dictum hendrerit metus egestas non. Ut quis est tellus. Duis luctus elit nec arcu bibendum lacinia. Quisque luctus orci lorem, sit amet consequat enim mollis quis. Nullam dui magna, aliquam non venenatis et, lobortis eget felis. 
            </div>
         </section> 
</div>

我的CSS是：

.toggle {
    height:230px;
    width:230px;
    position:relative;
    z-index:2;
    background:#CECECE;
}


.toggle:hover, .toggle.clicked {background:#F05A24;}

.orange {background#F05A24;}

.toggle img {width:100%;}

#pushOne img {padding-top:20px;}


.toggle a { position: absolute; padding:40px;}

.box {
    overflow:hidden;
    display:hidden;
    opacity:0;
    transition: all .4s ease-out;
    margin-top:0px;
    margin-bottom:20px;
    width:230px;
}


.slidebox:target .box {
    min-height:100px;
    opacity:1;
}


.slidebox {float:left; margin:0 50px 0 0; transition: all 0.2s ease;}
.slidebox:target .top { opacity:0; pointer-events: none;}


#category {margin:0 auto;width:80%;}

使用Javascript：

$(".toggle").click(function () {
   $(this).toggleClass(".clicked");
});</script>

这肯定是我的眼睛没有抓住的东西:(

Answer 1

您没有为单击的类（要切换到的类）指定任何css属性

删除点（。）。

$(".toggle").click(function () {
    $(this).toggleClass("clicked");
});

请包含外部jquery来源http://code.jquery.com/jquery-1.9.1.js

最后点击DIV永久颜色，由于某种原因不起作用

1 个答案: