当使用监听器函数点击文本框时，停止打开Bootstrap Accordion

Question

我有一个Bootstrap Accordion当点击文本框时，我需要防止手风琴打开同时，如果有人在texbox(蓝色区域(外单击，则让它像往常一样展开和收缩。

所以我试过

$(".accordion-button").click(function(event) {
//console.log($('.workflowTitle:focus').length)
if($('.workflowTitle:focus').length >= 1)
{
event.stopPropagation();
event.preventDefault();
return
}
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input class="workflowTitle" value="Accordion Item #1"/>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>

Answer 1

当input获得focus时，您可以禁用相应的塌陷，并在其blur事件上重新启用它。

$('.accordion .accordion-header input').on('focus', function(event) {
$(this).parent().attr('data-bs-toggle', 'disabled');
}).on("blur", function() {
$(this).parent().attr('data-bs-toggle', 'collapse');
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input class="workflowTitle" value="Accordion Item #1"/>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>

Answer 2

我浏览了Bootstrap文档，但找不到内置的方法来实现这些功能，因此我将展示一个可能的解决方案，该解决方案可作用于Bootstrap的可折叠组件发出的事件。

这个想法很简单，我们将有一个全局变量作为标志(true或false(，基于该标志，我们要么允许手风琴的打开/关闭机制，要么简单地阻止它们。

以下是我们要做的：

• 初始化一个全局变量，让我们称之为shouldPreventAccordion，它充当一个标志来判断是否应该阻止手风琴的打开/关闭
• 侦听input.workflowTitle上的focus事件，并将标志shouldPreventAccordion设置为true
• 侦听input.workflowTitle上的blur事件，并将标志shouldPreventAccordion设置为false
• 最后，我们监听Bootstrap的可折叠组件事件，主要是show.bs.collapse和hide.bs.collapse，并根据我们的标志来阻止或允许该操作

这里有一个现场演示来说明：

/** our flag */
let shouldPreventAccordion = !1;
/** when the input is focused we should prevent the accordion from opening/closing */
$(".workflowTitle").on('focus', () => shouldPreventAccordion = !0);
/** when the input is blured (lost focus) we should allow the accordion from opening/closing */
$(".workflowTitle").on('blur', () => shouldPreventAccordion = !1);
/** when the accordion is about to open we should check if that action is allowed using our flag */
$(".accordion").on('show.bs.collapse', e => {
shouldPreventAccordion && e.preventDefault();
return !shouldPreventAccordion;
});
/** when the accordion is about to close we should check if that action is allowed using our flag */
$(".accordion").on('hide.bs.collapse', e => {
shouldPreventAccordion && e.preventDefault();
return !shouldPreventAccordion;
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input class="workflowTitle" value="Accordion Item #1"/>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>

上述解决方案似乎很自然，因为我们正在侦听Bootstrap发出的事件，并且我们没有更改任何DOM属性。应该手动更改属性，例如Bootstrap用于控制其功能的属性。