1

この jquery トグル コードはこちらで見つかりました。次に、画像の中央に垂直に配置された「クリックして開く」というテキストを追加したいと思います。

これはコードです：

CSS:

.toggle{
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle.expanded{
    background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}

jQuery:

$(document).ready(function(){
    var $content = $(".content").hide();
    $(".toggle").on("click", function(e){
        $(this).toggleClass("expanded");
        $content.slideToggle();
    });
});

HTML:

<div class="toggle"></div>
<div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

何かご意見は？

4

2 に答える 2

1

このような？

:afterトグルに疑似要素を追加し、行の高さをいくつか追加します。

.toggle:after{
    content:"Click to Open";
    display:block;
    height:48px;
    line-height:48px;
    width:88px;
    margin-left:48px;
}
.toggle.expanded:after{
     content:"Click to Close";
}

デモ

または、次の方法を試してください。

HTML:

<div class="toggle">
  <span class="image"></span>
  <span class="text">Some Random text here. Hello</span>
</div>

CSS:

.toggle {
    height:48px;
    line-height:48px;
}
.toggle .image {
    vertical-align:middle;
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle .text {
    margin-left : 10px;
}

デモ

于 2013-10-01T01:33:05.687 に答える
0

div.toggle を div ではなく img にします。CSS で指定された background-image に src 属性を設定します。img に次の CSS を指定します

vertical-align:middle;

div.content をインラインで表示します。以下のJSを使用

var $content = $(".content").hide();
 $(".toggle").on("click", function(e) {
    $(this).attr("src", "http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
    $content.slideToggle();
 });

問題は、垂直方向に配置するテキストが長すぎて、改行が作成されると、改行の下にあるテキストが img の中央に沿って配置されないことです。

新しい jsFiddleを参照してください

于 2013-10-01T01:28:33.413 に答える