如何在点击时仅展开一里？

Question

所以我想要做的是当用户点击其中一项来展开它时。但这只是扩展了那个li，以显示它下面的数据。 这是我的小提琴：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

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

Answer 2

你可以为你所有的按钮附加一个点击事件来更新下一个div的类

$(".dropdown-toggle").on('click', function(){
    $(this).find('+ div').toggleClass('collapse');
  })

最好的解决方案是不选择所有下一个div，而是选择像这样的下一个类

$(this).find('+ .collapse-container').toggleClass('collapse');

https://jsfiddle.net/LLkaj4h0/2/

Answer 3

一种方法：

$('.dropdown-toggle').on('click', function() {
    $($(this).data('target')).toggleClass('collapse');
});

检查这个FIDDLE

在.dropdown-toggle 按钮上附加一个点击事件处理程序，并从data-target 属性中获取目标面板的id，然后找到此目标元素并切换其collapse 类以显示和隐藏面板。