Question

我为FAQ页面制作了一个可切换的菜单。它在桌面上运行良好，但尚未在移动设备上运行。原因是当标题无法在一行上显示时，.panel部分中的内容会包围复选标记。基本上我正在寻找的是一种将padding-left应用于适用于整个标题部分的标题的方法。现在，第二行的标题出现在复选标记下方，我想阻止这种情况发生。也许有一种方法可以给h3标题留下填充 - 而忽略了复选标记图标？我有一些问题可以准确地说出来，所以希望下面的bootply能让它更加清晰：

看看下面的bootply。

http://www.bootply.com/SWkBQnTDDB

    <div class="container">         
<div class="row">
    <div class="col-md-8 col-md-offset-2">

    <ul class="item-list" id="toggle-view">
                    <li>
                                        <h3><i class="fa fa-check"></i>This is the title This is the title This is the title This is the title This is the title This is the title This is the title <span class="fa fa-caret-up"></span></h3>
                    <div class="panel">
                        <p>content content content content content</p>
                    </div>
                    </li>
    </ul>

    </div>
</div>
</div>

$(document).ready(function () {

$('#toggle-view li').click(function () {
    var text = $(this).children('div.panel');
    if (text.is(':hidden')) {
        text.slideDown('200');
                    $(this).find('.fa-caret-up').removeClass('fa-caret-up').addClass('fa-caret-down');
    } else {
        text.slideUp('200');
                    $(this).find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up');
    }     
});
});

Answer 1

使用id panel-title添加p标签以包含您的标题。

<div class="container">         
<div class="row">
    <div class="col-md-8 col-md-offset-2">

    <ul class="item-list" id="toggle-view">
                    <li>
                                        <h3><i class="fa fa-check"></i>
                                          <p id="panel-title">This is the title This is the title This is the title This is the title This is the title This is the title This is the title</p> <span class="fa fa-caret-up"></span></h3>
                    <div class="panel">
                        <p>content content content content content</p>
                    </div>
                    </li>
    </ul>

    </div>
</div>

将以下CSS提供给.fa-check和＃panel-title

.fa-check {
    max-width: 50px;
    vertical-align: top;
    width: 10%;
  }

#panel-title { 
    display: inline-block;
    width: 90%;
}

在可切换的引导程序菜单中将padding-left应用于li元素，忽略复选标记图标？

1 个答案: