-1

したがって、リストをドロップダウンしてバックアップするコードがあります。ここで、ボタンを両方の方法で使用したいと考えています。なんとか倒せましたが、バックアップがうまくいきませんでした。リストと共通のdivにボタンを追加しようとしていましたが、時間通りにクリックするとボタンが消えてしまい、うまくいきませんでした。だから私は本当にそれをできるだけスタイル的にしたい.

ここに再びコードがあります

HTML

<div id="right-column-sidebar">
    <ol>
        <li><a href="#">Title 1</a></li>
        <li><a href="#">Title 2</a></li>
        <li><a href="#">Title 3</a></li>
        <li><a href="#">Title 4</a></li>
        <li><a href="#">Title 5</a></li>
        <li><a href="#">Title 6</a></li>
        <li><a href="#">Title 7</a></li>
        <li><a href="#">Title 8</a></li>
        <li><a href="#">Title 9</a></li>
        <li><a href="#">Title 10</a></li>
        <li><a href="#">Title 11</a></li>
        <li><a href="#">Title 12</a></li>
        <li><a href="#">Title 13</a></li>
        <li><a href="#">Title 14</a></li>
        <li><a href="#">Title 15</a></li>
        <li><a href="#">Title 16</a></li>
        <li><a href="#">Title 17</a></li>
        <li><a href="#">Title 18</a></li>
        <li><a href="#">Title 19</a></li>
        <li><a href="#">Title 20</a></li>
    </ol>
</div>

CSS

div#right-column-sidebar{
    position: absolute; 
    right: -140px;
}

div#right-column-sidebar ol{
    position:absolute; 
    right: 150px;
    margin: 10px 0 10px 10px;
    font-size: 20px;
    color: red;
    list-style-type:none
}

div#right-column-sidebar ol li {
    list-style-type:none;
    margin: 10px 0 10px 0; 
    border-bottom: 1px dotted grey; 
    width: 200px; display: block;
}

div#right-column-sidebar ol li a{
    font-size: 60%; color: blue;margin-left: 20px
}
div#right-column-sidebar ol li:nth-child(11){
    margin-left:0;
}      
div#right-column-sidebar ol li a:hover{
    text-decoration: underline;
}

a.button {
    border: 1px solid lightgrey;no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

Jクエリ

$(function(){
    $('div#right-column-sidebar ol li:gt(9)').hide();
    $('a.button').click( function() { 
        $('div#right-column-sidebar ol li:gt(9)').toggle(); 
        $('a.button').addClass('change-height');
    });
});
4

1 に答える 1

0

これに似たものが欲しいですか - http://jsfiddle.net/7CxG8/ ?

から を削除position: absoluteしたolので、ボタンが の寸法の変更を認識/応答するようになりましたol。

「スローモーション効果」を得るには、jquerys トグル関数 (3000 = 3s) の引数として数値を渡すだけです。これは機能しますが、得られる最高の効果ではありません。私は通常、css トランジション/アニメーションを使用して独自の効果を作成します。

于 2012-07-27T22:19:59.150 に答える