-1

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

任何帮助深表感谢。

我的问题的小提琴：http: //jsfiddle.net/Gr8sw/

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

这肯定是我的眼睛没有注意到的东西:(

4

1 回答 1

0

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

删除点 (.)。

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

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

于 2013-09-29T10:15:18.903 回答