html - 如何在点击时只展开一里？

Question

所以我想做的是当用户单击其中一项以展开它时。但这仅扩展了 li，以显示其下方的数据。 这是我的 fiddle :https://jsfiddle.net/LLkaj4h0/有什么建议吗？

<div class="col-md-12 col-sm-12">
            <div class="row">
                <ul class="list-of-consalting">
                    <li>    
                    <div class="dropdown">
                        <button class="dropdown-toggle" type="button" data-toggle="collapse" style="background-color:transparent;border:none;" data-target="#finansijskimenadjment">
                        <span>Finansijski menadžment</span><span style="color:#c20c0c;margin-left:5px;" class="fa fa-angle-down"></span>
                        </button>
                        <div id="finansijskimenadjment" class="collapse ">
                            <ul class="expand-details">
                            <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li>
                            <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li>
                        </ul>
                        </div>
                    </div>
                </li>
                    <li>    
                    <div class="dropdown">
                        <button class="dropdown-toggle" type="button" data-toggle="collapse" style="background-color:transparent;border:none;" data-target="#racunovodstvenosavjetovanje">
                        <span>Računovodstveno savjetovanje</span><span style="color:#c20c0c;margin-left:5px;" class="fa fa-angle-down"></span>
                        </button>
                        <div id="racunovodstvenosavjetovanje" class="collapse ">
                            <ul class="expand-details">
                            <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li>
                            <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li>
                        </ul>
                        </div>
                    </div>
                </li>
                    <li>    
                    <div class="dropdown">
                        <button class="dropdown-toggle" type="button" data-toggle="collapse" style="background-color:transparent;border:none;" data-target="#poreznosavjetovanje">
                        <span>Porezno savjetovanje</span><span style="color:#c20c0c;margin-left:5px;" class="fa fa-angle-down"></span>
                        </button>
                        <div id="poreznosavjetovanje" class="collapse ">
                            <ul class="expand-details">
                            <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li>
                            <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li>
                        </ul>
                        </div>
                    </div>
                </li>
                    <li>    
                    <div class="dropdown">
                        <button class="dropdown-toggle" type="button" data-toggle="collapse" style="background-color:transparent;border:none;" data-target="#javnefinansije">
                        <span>Javne finansije - budžet i trezor</span><span style="color:#c20c0c;margin-left:5px;" class="fa fa-angle-down"></span>
                        </button>
                        <div id="javnefinansije" class="collapse">
                            <ul class="expand-details">
                            <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li>
                            <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li>
                        </ul>
                        </div>
                    </div>
                </li>
                    <li>    
                    <div class="dropdown">
                        <button class="dropdown-toggle" type="button" data-toggle="collapse" style="background-color:transparent;border:none;" data-target="#korporativnoposlovnopravo">
                        <span>Korporativno - poslovno pravo</span><span style="color:#c20c0c;margin-left:5px;" class="fa fa-angle-down"></span>
                        </button>
                        <div id="korporativnoposlovnopravo" class="collapse">
                            <ul class="expand-details">
                            <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li>
                            <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li>
                        </ul>
                        </div>
                    </div>
                </li>
                    <li>    
                    <div class="dropdown">
                        <button class="dropdown-toggle" type="button" data-toggle="collapse" style="background-color:transparent;border:none;" data-target="#eufondovi">
                        <span>EU fondovi</span><span style="color:#c20c0c;margin-left:5px;" class="fa fa-angle-down"></span>
                        </button>
                        <div id="#eufondovi" class="collapse">
                            <ul class="expand-details">
                            <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li>
                            <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li>
                        </ul>
                        </div>
                    </div>
                </li>
                    <li>    
                    <div class="dropdown">
                        <button class="dropdown-toggle" type="button" data-toggle="collapse" style="background-color:transparent;border:none;" data-target="#usaglasavanjezakonodavstva">
                        <span>Usaglašavanje zakonodavstva sa pravom Evropske unije</span><span style="color:#c20c0c;margin-left:5px;" class="fa fa-angle-down"></span>
                        </button>
                        <div id="usaglasavanjezakonodavstva" class="collapse">
                            <ul class="expand-details">
                            <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li>
                            <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li>
                        </ul>
                        </div>
                    </div>
                </li>
                </ul>
            </div>
        </div>

Answer 1

您只需要在bootstrap.min.js 之前添加jquery.min.js。 bootstrap 内置了此功能。

间距问题是因为 ul.list-of-consalting li 选择器中的 float:left 属性。我已更新此选择器中的 width 属性，并将 float:right 属性添加到 li:nth-child(even) 选择器。

更新的 CSS:

ul.list-of-consalting > li {
    list-style: decimal;
    font-family: 'PT_Sans_Caption_Bold';
    font-size: 14px;
    color: #282828;
    float: left;
    width: calc(50% - 10px);
    list-style-position: inside;
    border-bottom: 1px solid #ccc;
    margin-left: 10px;
    padding: 10px;
}

ul.list-of-consalting > li:nth-child(even){
    float: right;
}

jsfiddle link

css 更新了 jsfiddle 链接中的 [1371-1386] 行。