Bootstrap 可编辑手风琴名称

Question

我正在尝试使用 Knockout foreach 和可编辑的 header 构建一个 Bootstrap 手风琴。当双击手风琴名称时，名称应该变成一个输入框（可能不是最好的主意），它应该在输入单击或在该区域外单击（更改焦点）时保存更改。我的问题是，当用户双击名称进行编辑时，面板会展开和折叠，有些人发现很难编辑。

<div class="col-lg-12 panel m-t-5 panel-group" id="mAccordion">
    <div class="panel panel-default" data-bind="foreach:{ data: selectedItemM, as: 'mod'}">
        <div class="panel-heading ui-sortable-handle" style="border-color:black; background-color:black; margin-bottom: 2px" data-bind="visible:!IsDeleted()">
            <i class="fas fa-trash-alt pull-right" style="color:red; cursor:pointer" data-bind="event:{'click':$root.deleteM}"></i>
            <a class="accordion-toggle accordion-inner" style="color:#fff; text-decoration:none;cursor:pointer;" data-bind="attr:{href:'#mPanelBody_'+Id}" data-toggle="collapse" data-parent="#modAccordion">
                <h4 class="panel-title" data-bind="attr:{id:'header_'+Id}, text: Name, event:{'dblclick':$root.editM}" style="color:white;cursor: pointer; width:30%"></h4>
                <input type="text" class="panel-title" data-bind="attr:{id:'input_'+Id}, textInput: Name,valueUpdate: 'afterkeydown', event:{keypress:$root.renameM}" style="color:white;display:none; background-color:black; width:30%;" />
            </a>
        </div>
        <div class="panel-collapse accordion-sub collapse" data-bind="attr:{id:'mPanelBody_'+Id}, visible:!IsDeleted()"></div>
    </div>
</div>

可以使手风琴的名称仅在双击（或简单单击）时可编辑，而无需对手风琴进行任何操作（展开或折叠），并且仅在名称区域外单击时展开或折叠它, 在空的 space 来自 header?

Answer 1

您可以使用 hasFocus 绑定来检测输入并设置焦点。您可以在点击处理程序中使用 event.stopPropagation 来防止点击事件冒泡到手风琴的切换点击目标。这是一个显示的示例：

单击 header 中的文本（绿色边框）开始编辑它。
移除对编辑输入的关注会放回 header
在标题中的文本外部（蓝色边框）单击可切换手风琴。

const expanded = ko.observable(false);

const focus = ko.observable(false);
const title = ko.observable("Heading");


const startEdit = function(data, event) {
  focus(true);
  event.stopPropagation();
};

const toggle = function() {
  if (!focus()) {
    expanded(!expanded());
  }
};

ko.applyBindings({ expanded, toggle, focus, title, startEdit });

h2 {
 border: 1px solid blue;
 padding: .5rem;
}

span {
 border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<h2 data-bind="click: toggle">
  <span data-bind="text: title, click: startEdit, visible: !focus()"></span>
  <input type="text" data-bind="textInput: title, visible: focus, hasFocus: focus, clickBubble: false">
</h2>

<div data-bind="visible: expanded">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Bootstrap 可编辑手风琴名称

Bootstrap editable accordion name

knockout.js

bootstrap-accordion

bootstrap-4