Question

所以我的手风琴设置如下： -

button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; 
}

div.accordion_panel {
    padding: 0 18px;
    background: #d7d7d7;
    display: none;
}

div.accordion_panel.show {
    background: #d7d7d7 !important;
    display: block;
}

和它的html实现如下： -

<ul id="WorkHistoryContainer" class="WorkHistoryContainer">
    <button class="accordion">Work Experience</button>
    <div class="accordion_panel">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><p class='form_label'>Employer Name: <input type="text" class="form-control  spec_one" name="Employer[]"></p></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><p class='form_label'>Position: <input type="text" class="form-control  spec_one" name="Position[]"></p></div>   
    </div>

    <button class="accordion">Work Experience</button>
    <div class="accordion_panel">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><p class='form_label'>Employer Name: <input type="text" class="form-control  spec_one" name="Employer[]"></p></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><p class='form_label'>Position: <input type="text" class="form-control  spec_one" name="Position[]"></p></div>   
    </div>

    <button class="accordion">Work Experience</button>
    <div class="accordion_panel">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><p class='form_label'>Employer Name: <input type="text" class="form-control  spec_one" name="Employer[]"></p></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><p class='form_label'>Position: <input type="text" class="form-control  spec_one" name="Position[]"></p></div>   
    </div>
</ul>

我基本上都在尝试制作可折叠的可折叠手风琴，但是当我使用bootstrap时，jQuery UI中内置的手风琴不起作用。

我基本上要做的是制作标题按钮＆＃34;工作经验＆＃34;可排序的，但是当它的点击也需要与它一起排序时显示的底层div。我已尝试将按钮和div包装在LI中，但是当单击该按钮时，LI会扩展以覆盖div的可查看内容（应该如此）。我想将排序限制在按钮上，但是按钮和div随排序移动。我怎么能这样做？

jQuery Sortable - 附加div

0 个答案: