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

您只需在jquery.min.js之前添加bootstrap.min.js即可。 bootstrap已构建此功能。

间距问题是因为float:left选择器中的ul.list-of-consalting li属性。我在此选择器＆amp;中更新了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]。

Answer 2

您可以将click事件附加到所有人按钮，以更新下一个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按钮上附加点击事件处理程序，并从id属性获取目标面板的data-target，然后找到此目标元素并切换其collapse用于显示和隐藏面板的类。

如何在点击时只扩展一个li？

3 个答案: