1

我知道这将涉及 Jquery，我不像我自己想的那样学习。我知道有一个切换功能，但不知道如何模拟它以供我自己使用。

这在css3中也可能吗？但我猜测 Jquery 会是一个更好的跨浏览器解决方案。

4

5 回答 5

3

假设您有一个带有特定的按钮或其他元素id：

$('#id').click(
    function(){
        $('.className').toggle();
    });

或者，更漂亮一点：

$('#id').click(
    function(){
        $('.className').fadeToggle();
        /* or:
        $('.className').slideToggle();
        */
    });

考虑到一些相当具体的标记约束和较低的跨浏览器兼容性要求，这在 CSS 中是可能的，尽管仅在 CSS3 中：

HTML：

​&lt;a href="#show">Show all</a>
    <div id="show">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <a href="#">hide</a>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

div {
    height: 0;
}
div > a {
    opacity: 0;
}
div:target a {
    opacity: 1;
}

div > ​div {
    height: 0;
    width: 0;
    margin: 0 auto;
    border-width: 0;
    border-style: solid;
    border-color: #000;
    border-radius: 1em 0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

div:target > div​ {
    height: 200px;
    width: 200px;
    border-width: 2px;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}​

JS 小提琴演示。

当然，上述内容可以适用于特定类而不是所有 div元素，这是使用通用兄弟组合器处理特定类的一种（尽管可能不是唯一~）方法：

HTML：

<a href="#show">Show all</a>
<a href="#firstOne">Show all '.one' elements</a>
<a href="#firstTwo">Show all '.two' elements</a>
<div id="show">
    <div></div>
    <div id="firstOne" class="one"></div>
    <div id="firstTwo" class="two"></div>
    <div></div>
    <div class="one"></div>
    <div></div>
    <div class="two"></div>
    <div class="one"></div>
    <a href="#">hide</a>
</div>​

CSS：

div {
    height: 0;
}
div > a {
    opacity: 0;
}
div:target a {
    opacity: 1;
}

div > div {
    height: 0;
    width: 0;
    margin: 0 auto;
    border-width: 0;
    border-style: solid;
    border-color: #000;
    border-radius: 1em 0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

div:target > div {
    height: 200px;
    width: 200px;
    border-width: 2px;
    background-color: #ccc;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

div:target > .one,
.one {
    background-color: #ffa;
}

div:target > .two,
.two {
    background-color: #f90;
}

.one:target,
.one:target ~ .one {
    height: 200px;
    width: 200px;
    border-width: 2px;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.two:target,
.two:target ~ .two {
    height: 200px;
    width: 200px;
    border-width: 2px;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

JS 小提琴演示。

但请记住，CSS 选择只能选择稍后出现在 DOM 中的元素，因此要显示链接的所有div元素必须是 that的第一个元素，因此，简而言之，目标必须从字面上看，是。因此这个名字，真的，但似乎值得一提。class="one"targetclass#firstOne

参考：

于 2012-05-20T22:48:34.433 回答
2

尝试 ：

$(button).click(function(){
    $('.yourclassname').toggle();
});

jQuery.toggle这是有关该功能的一些文档：http: //api.jquery.com/toggle/

于 2012-05-20T22:47:59.587 回答
0

我不确定你会如何在 css3 中做到这一点，但在 jquery 中你使用类选择器（“.class”）。

于 2012-05-20T22:45:18.637 回答
0 
$('.myclass').on('click', function() { $(this).slideToggle('fast'); });
于 2012-05-20T22:48:02.437 回答
0 
$(this).click(function(){


   $("element_to_delete").toggle();


});

如果你想隐藏/显示

于 2012-05-20T22:48:18.947 回答