Question

我在<input type="checkbox">内的<summary>内有一个<details>标记，不幸的是，它在<details>处于选中或未选中状态时切换为打开或关闭this question concerning space toggling details，但是很遗憾，在我的Firefox版本中，无法使用相同的方法来修复它。

请参见以下代码段：

$('input').change(function(e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details>
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

如何通过选中或取消选中复选框来防止<details>打开/关闭？（除了将<input>标签移到<summary>之外的明显答案之外，我很好奇为什么会发生这种情况）

修改

正如@Terry提到，然后由我确认，此问题不会影响Safari或Chrome，甚至Windows上的Firefox似乎也有不同的行为（它完全忽略了对复选框的单击）。已确认影响OS X Mojave 10.14.4上的Firefox 66.0.2-3。

此外，即使您在<summary>和return false;上捕获了点击事件，该复选框仍会切换<details>，即使在<summary>中的其他位置没有点击。 / p>

编辑2

这是一个Firefox错误，已在版本67中修复。

Answer 1

欢迎来到不兼容的浏览器世界！：D

首先，您应该考虑使用click事件而不是change事件，因为如果用户单击复选框，则首先{{1} }事件被触发，然后触发click事件，这意味着change事件负责切换行为，而不是click事件。

因此，在Chrome和Firefox上，change元素中的click，input，button等特殊元素的textarea事件冒泡到父summary元素，这是正常现象，但是有趣的是，details事件显然仅在Chrome中被忽略，而未进一步处理，因此click元素未切换。您可以在Chrome上尝试使用其他元素（例如details）来进行尝试，但不会发现任何区别。另一方面，Firefox只是在不考虑元素类型的情况下进行切换。

因此，要克服此问题（可以在CSS的帮助下），可以尝试使用一个button鬼元素，即绝对位置正确的元素，因此不属于常规文档流程。它是不可见的，最重要的是，它停留在其顶部并首先处理checkbox事件，从而操作可见复选框的状态，如下所示：

P.S。在Firefox和Chrome上均可使用-经过测试。

click

  
$('input.ghost-checkbox').click(function(e) {
    $(this).next().prop('checked', !$(this).next().prop('checked'));
    return false;
});

 
.ghost-checkbox {
  opacity: 0;
  position: absolute;
  z-index: 2;
}

Answer 2

要获得预期结果，请使用以下选项

在取消选中详细信息后删除属性
限制打开详细信息的点击

$('input').change(function(e) {
if(!$("input").is(':checked')){   
  $('details').removeAttr('open');  
}
  e.stopPropagation();
  e.preventDefault();
  return false;
});



$('details').on('click', function(e) {
 if(!$("input").is(':checked')){
   if(e.target != this) return
       e.stopPropagation();
       e.preventDefault();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details id="mydetails">
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

选项2：使用div的显示和隐藏

$('input').change(function(e) {
if(!$("input").is(':checked')){   
  $('details').removeAttr('open');  
}
  e.stopPropagation();
  e.preventDefault();
  return false;
});



$('details').on('click', function(e) {
     if(!$("input").is(':checked')){
       $('div').hide();
       $('details').removeAttr('open');
     }else{
       $('div').show();
     }
       
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details id="mydetails">
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

Answer 3

如果我理解得很好，则需要选中复选框以隐藏详细信息，以便可以使用hidden属性。

let bool = true;
const content = document.getElementById("content");
$('input').change(function(e) {
  bool = !bool;
  if (bool) {
    content.setAttribute("hidden", true);
  } else {
    content.removeAttribute("hidden");
  }
});

<details>
<summary>
  abrir aqui
  <input type="checkbox">
</summary>
<div hidden="true" id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
</div>
</details>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

此问题已在Firefox 67中修复。

请参见https://bugzilla.mozilla.org/show_bug.cgi?id=1524893。

（https://bugzilla.mozilla.org/show_bug.cgi?id=1554691和https://bugzilla.mozilla.org/show_bug.cgi?id=1539490）是问题的重复。

Answer 5

尝试.triggerHandler()方法。在复选框中定义事件处理程序，然后使用：

$(':checkbox').triggerHandler('click')

将click事件与触发其他事件隔离开。我没有Mac，因此非常感谢您提供反馈。

$(':checkbox').click(function(e) {
  console.log($(this).is(':checked'));
});
$(':checkbox').triggerHandler('click')

details {
  width: 50%
}

summary * {
  display: inline-block;
  cursor: pointer
}

mark {
  float: right
}

<details>
  <summary>
    <input type="checkbox"><mark>TEST</mark>
  </summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit.
    Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor
    id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor
    nibh.
  </div>
</details>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 6

您是否尝试过event.stopImmediatePropagation()，这将立即停止活动

防止输入复选框切换<详细信息>

6 个答案: