0

如下所示：

对齐顶部 http://www.kerrydeaf.com/aa.png

问题：当我点击手风琴打开时，你可以看到'+'和'-'图标同时出现。这是因为文本标题分散到两行。只有一行就可以了。

对齐顶部 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

您正在使用精灵

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

当标题分成两行时，精灵的其他部分“流血”到视图中。您只需要增加精灵的单个部分之间的填充。

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

这仅在打开时发生，因为打开图标位于关闭图标上方。

如果你不想编辑精灵，你可以引入一个额外的元素来保存图标并声明一个固定的高度并在其上隐藏溢出。

<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

我建议使用另一个精灵

此版本适用于各种身高，与 Christoph 的解决方案不同

+----------+
|  -       |
|          |
|          |
|       +  |
+----------+
于 2012-09-11T22:34:55.263 回答