Question

如下所示：

align top http://www.kerrydeaf.com/aa.png

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

align top 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>

Answer 1

您正在使用精灵

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

当标题分成两行时，精灵的其他部分出现＆＃34;出血＆＃34;进入视野。你只需要增加精灵的单个部分之间的填充。

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

仅在打开时才会出现这种情况，因为打开图标位于关闭图标上方。

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

<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*/
}

在关闭状态之前做同样的事情。

Answer 2

我建议使用另一个精灵

此版本适用于每个高度，与Christoph的解决方案不同

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

CSS：'+'和' - '图标仅在打开手风琴时显示为' - '

2 个答案: