0

以下のようにOKです。

上揃え http://www.kerrydeaf.com/aa.png

問題: アコディオンをクリックして開くと、「+」アイコンと「-」アイコンが同時に表示されます。これは、テキストの見出しが 2 行に広がっているためです。1行だけでもOKです。

上揃え http://www.kerrydeaf.com/bb.png

「+」アイコンと「-」アイコンを開いたときにのみ「-」として表示するにはどうすればよいですか。

私はjQuery 1.7を使用しており、iPhone用です。

これはCSSです：

  .trigger {padding:0px;margin:0; background:url(../images/toggle_small.svg) no-repeat right; background-position:100% -20px; } 
  .trigger a{color: #636363;text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-family:opensans;font-weight:normal; }

HTML:

    <div class="toogle_wrap">
        <div class="trigger"><a href="#"><span class="trig">8.</span> lorem lorem lorem lorem lorem lorem lorem lorem</a></div>
        <div class="toggle_container">
        <ul class="lists">
        <li>Lorem ipsum consectetur adipisicing elit</li>
        <li>Lorem ipsum consectetur adipisicing elit</li>
        <li>Lorem ipsum consectetur adipisicing elit.</li>
        </ul>
        </div>
    </div>

JS:

<script type="text/javascript">
     var $ = jQuery.noConflict();
     $(function() {
         $('#tabsmenu').tabify();
         $(".toggle_container").hide(); 

         $(".trigger").click(function(){
         $(this).toggleClass("active").next().slideToggle("slow");
         return false;
         });
     });
</script>
4

2 に答える 2

0

スプライトを使用しています

+-----+
|  -  |
|  +  |
+-----+

見出しが2つの線に分かれると、スプライトの他の部分がビューに「ブリード」します。スプライトの単一部分の間のパディングを増やす必要があります。

+-----+
|  -  |
|     |
|     |
|  +  |
+-----+

open-iconはclose-iconの上に配置されるため、これは開いたときにのみ発生します。

スプライトを編集したくない場合は、アイコンを保持し、固定の高さとその上に隠されたオーバーフローを宣言する追加の要素を導入できます。

<div class="toogle_wrap">
        <div class="trigger"><a href="#">...<span class="open"></span></a></div>

.open{
   background:      /* declare your background-image here*/
   height:          /* exact height of the - sign*/
   overflow:hidden; /* prevent bleeding*/
}

閉じた状態でも同じことを行います。

于 2012-09-11T22:06:42.727 に答える
0

別のスプライトを使用することをお勧めします

このバージョンは、クリストフのソリューションとは異なり、あらゆる身長に適しています

+----------+
|  -       |
|          |
|          |
|       +  |
+----------+
于 2012-09-11T22:34:55.263 に答える