1

これにはJqueryが関係することはわかっていますが、自分でこれをモックアップしたいほど学んだことはありません。トグル機能があることは知っていますが、自分で使用するためにこれをモックアップする方法がわかりません。

これは css3 でも可能でしょうか? しかし、Jquery の方が優れたクロス ブラウザー ソリューションになると思います。

4

5 に答える 5

3

特定の を持つボタンまたはその他の要素があると仮定しますid。

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

または、もう少しきれいにするために：

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

これは、 CSS3 でのみ可能ですが、いくつかのかなり具体的なマークアップ制約と低いクロスブラウザー互換性要件を考えると、CSS で可能です。

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要素ではなく特定のクラスに適用するように適応させることができます。これは、一般的な兄弟コンビネーターを使用して、特定のクラスを操作する1 つの(おそらく唯一で~はない) 方法です。

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要素を表示するには、その の最初の要素でなければなりません。つまり、簡潔にするために、ターゲットは文字通り、したがって、実際には名前ですが、それを指定する価値があるように思われました。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 に答える