这里有一个漂亮的小手风琴，它使用标题来展开和折叠下面的内容。一切都按我想要的方式运行，除了一件事：当您通过单击某个部分来展开某个部分时...

这里有一个漂亮的小折叠面板，它使用标题来展开和折叠下面的内容。一切都按我想要的方式运行，除了一件事：当您通过单击标题展开某个部分时，您应该能够再次单击标题来折叠它。这张图片有什么问题？

<script type="text/javascript">
$(document).ready(function(){

$(".haccordion > :header").addClass("h-trigger static").next().addClass("section collapsed").attr("inert","");

document.querySelectorAll('.h-trigger').forEach(el => {
  el.setAttribute("tabindex", "0");
  el.addEventListener("keydown", e => {
    if ([" ", "Enter", "ArrowDown"].includes(e.key)) {
      e.target.click();
    }
  });
});
$(".h-trigger.static").click(function(){
    $(this).closest(".haccordion").find(".h-trigger.active").removeClass("active").addClass("static");
    $(this).closest(".haccordion").find(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert","");
    $(this).removeClass("static").addClass("active");
    $(this).next(".section.collapsed").removeClass("collapsed").addClass("expanded").removeAttr("inert","");
  });

$(".h-trigger.active").click(function(){    
    $(this).removeClass("active").addClass("static");
    $(this).next(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert","");
  });
});

</script>

<div class="haccordion">
  <h2>Section with a paragraph</h2>
  <p>Here is some text content</p>
  <h2>Section with a div</h2>
  <div>
    <h3>Heading</h3>
    <p>Here is some content with text and an image</p>
    <p><a href="#">Test link</a></p>
  </div>
  <h2>Section with a list</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

抱歉再次提出这个问题，因为这里和这里有答案。但这似乎特定于一个页面。我正在为浏览器书签栏构建一个简单的“按钮”，

抱歉再次提出这个问题， 这里 和 这里 有答案。但是

这似乎特定于某个页面。我正在为浏览器书签栏构建一个简单的“按钮”，它将抓取我所在的页面的名称和 URL，然后轻松粘贴到电子表格中。在其他网站上，我使用 Javascript 查找文本，然后我可以轻松地将其粘贴到任何地方。

来自另一个网站的示例（business.currys.co.uk）

javascript:void(
eval('function copyToClipboard(element) {    
var $temp = $("<input>");    
$("body").append($temp);    
$temp.val(element).select();    
document.execCommand("copy");
    $temp.remove();}
    var copyableVal =  $("#product-container > h1").text().trim() + " " + $(".page-title span:last-child").text() + " " + $("#product-container > div.product-info > form > dl > dd:nth-child(2)").text().trim();
copyToClipboard(copyableVal);'))

我想用 LinkedIn 来实现这一点。重复一遍 - 打开任何 LinkedIn 个人资料页面。姓名就在这个元素中

<h1 class="text-heading-xlarge inline t-24 v-align-middle break-words">Jannes Sörensen</h1>

<!-- Full Xpath -->
/html/body/div[6]/div[3]/div/div/div[2]/div/div/main/section[1]/div[2]/div[2]/div[1]/div[1]/span[1]/a/h1

我正在测试课程的独特性

$( document ).ready(function() {
  var classCount= $('.t-24').length;
  console.log(classCount);
 });

$( document ).ready(function() {
  var classCount = $(':header').length;
  console.log(classCount);
 });

但是我在控制台中一直得到 0:( 我想知道 Jquery 是否以某种方式被阻止了？

$(".h-trigger.active").click 只会将点击处理程序附加到 h-trigger 当前 为 的 active 执行此行时 active 没有 则没有元素 会接收该点击处理程序。

以同样的方式， $(".h-trigger.static").click 在所有触发器元素上创建一个处理程序，因为 .static 在附加处理程序时它们都具有该处理程序。每次单击触发器元素时都会执行该处理程序，而不仅仅是在它们处于静态时执行。但是，这不太容易看到其效果，因为单击活动触发器最终会折叠然后重新激活它，从而导致无操作。

有两种解决方案（实际上，只有一种解决方案；另一种是 jQuery 通过在幕后工作来帮助您或多或少地完成第一种解决方案）：

1. p3

2. p4

$(document).ready(function(){

$(".haccordion > :header").addClass("h-trigger static").next().addClass("section collapsed").attr("inert","");

document.querySelectorAll('.h-trigger').forEach(el => {
  el.setAttribute("tabindex", "0");
  el.addEventListener("keydown", e => {
    if ([" ", "Enter", "ArrowDown"].includes(e.key)) {
      e.target.click();
    }
  });
});
// DELEGATED HANDLER HERE
$(".haccordion").on("click", ".h-trigger.static", function(){
    $(this).closest(".haccordion").find(".h-trigger.active").removeClass("active").addClass("static");
    $(this).closest(".haccordion").find(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert","");
    $(this).removeClass("static").addClass("active");
    $(this).next(".section.collapsed").removeClass("collapsed").addClass("expanded").removeAttr("inert","");
  });
// DELEGATED HANDLER HERE
$(".haccordion").on("click", ".h-trigger.active", function(){    
    $(this).removeClass("active").addClass("static");
    $(this).next(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert","");
  });
});

.collapsed {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="haccordion">
  <h2>Section with a paragraph</h2>
  <p>Here is some text content</p>
  <h2>Section with a div</h2>
  <div>
    <h3>Heading</h3>
    <p>Here is some content with text and an image</p>
    <p><a href="#">Test link</a></p>
  </div>
  <h2>Section with a list</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

委托处理程序将捕获 上的冒泡事件 .haccordion ，测试事件来源的元素是否适合 .h-trigger.active （或 .h-trigger.static 创建处理程序时 .h-trigger.active 和 .h-trigger.static 是否存在并不重要 .haccordion 是 。

感谢 mPlungjan 的指导。我以您的回答为灵感，并创建了一些“纯 javascript”来使其工作。

也得到了 perplexity.ai 的一些帮助。

我已经创建了这个\'抓取\' - 将其保存为书签，单击它，您将获得一个剪贴板条目：人名、职位、URL，然后您可以轻松保存您正在联系的人，以供日后参考或导入到其他 CRM。

javascript:(function(){
    var lnData = "";
    lnData += document.getElementsByClassName("t-24")[0].innerText;
    lnData += "%09";
    lnData += document.getElementsByClassName("text-body-medium")[0].innerText;
    lnData += "%09";
    lnData += document.location.href;
    navigator.clipboard.writeText(lnData).then(function() {
        alert("Copied to clipboard");
    }).catch(function(err) {
        console.error('Failed to copy: ', err);
    });
})();

让 lnData = `${document.querySelector(\'.t-24\').innerText.trim()}\t${document.querySelector(\'.text-body-medium\').innerText.trim()}\t${document.location.href}`;

这里的 $ 不是 jQuery。`${somevariable}` 是所谓的模板文字

您需要单击它才能获得它。

这是一个不依赖 jQuery 的普通 js 版本

您需要检查选择器。例如，我在 LinkedIn 个人资料页面上找不到产品容器

由于安全原因，以下脚本无法在 SO 上运行

javascript: (() => {
  const copyToClipboard = (text) => {
    window.focus();
    navigator.clipboard
      .writeText(text)
      .then(() => alert("Copied to clipboard"))
      .catch((err) => console.error('Failed to copy: ', err));
  };
  let container = document.getElementById('product-container'),
    copyableVal = `${container.querySelector('h1').textContent.trim()} ${document.querySelector(".page-title span:last-child").textContent.trim()} ${container.querySelector('div.product-info > form > dl > dd:nth-child(2)').textContent.trim()}`;
  console.log(copyableVal);
  copyToClipboard(copyableVal);
})()

<div id="product-container">
  <h1>Header</h1>
  <div class="page-title">
    <span>1</span><span>2</span><span>last span</span>
  </div>
  <div class="product-info">
    <form>
      <dl>
        <dd>DD1</dd>
        <dd>DD2</dd>
        <dd>DD3</dd>
        <dd>DD4</dd>
      </dl>
    </form>
  </div>
</div>

抱歉，添加工作示例可能会造成混淆。产品容器 div 在 business.currys.co.uk 网站上，而不是在 LinkedIn 上。问题是我似乎无法在 LinkedIn 上的任何选择器上获取长度。一旦我解决了这个限制，我相信我就能以某种方式识别和抓取东西 - 也许你的方法肯定会奏效 :)