Question

如何在Javascript中检测详细信息元素何时打开或关闭？除了将侦听器附加到click函数并检查是否设置了open属性之外。

Answer 1

您可以使用toggle event：

var details = document.querySelector("details")

details.addEventListener("toggle", function() {
 details.firstChild.textContent = "done"
})

<!doctype html>
<details>
 <summary>toggle event</summary>
</details>

Answer 2

要测试没有事件侦听器的当前状态，我们可以简单地检查是否设置了属性public static class Extension { public static double ToDouble(this TimeSpan o) => o.TotalDays; }：

open

// Test
onclick = () => {
  console.log(
    !detailElem.hasAttribute("open")
  )
}

Answer 3

On Jquery

$("#detail-id").on("toggle", function () {
   //code
});

Answer 4

$("details").on("click", function () {
  $("details[open]").not(this).removeAttr("open");
});

@import "https://fonts.googleapis.com/css?family=Montserrat:400,400i,700";*{position:relative;margin:0;padding:0;box-sizing:border-box;font-family:Montserrat,sans-serif}:focus{outline:none}body{background:#e0e0e0;height:100vh}div{width:400px;margin:0 auto;top:50%;transform:translateY(-50%);color:#464646;border:1px solid silver}p,summary{background:#fff}summary{padding:20px;width:400px;font-size:19px;z-index:1;border-bottom:1px solid silver;cursor:pointer}p{width:440px;margin:-2px -20px 0;padding:30px;font-size:15px;line-height:1.5;border:1px solid silver;text-align:justify;z-index:2;box-shadow:0 0 30px -12px #000}details[open] p{animation:det .3s}@keyframes det{0%{opacity:0}100%{opacity:1}}button{float:right;background:#0288d1;border:0;padding:11px;margin:-6px -6px 0 0;color:#fff;border-radius:4px;cursor:pointer}button:hover{background:#01579b}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <details>
        <summary>Standard Room</summary>
        <p>A standard room of a standard size, with a standard number of beds. Comes with the standard number of facilities. The view is of, well the usual. No balcony.</p>
    </details>
    <details>
        <summary>Deluxe Room</summary>
        <p>Like the Standard Room, but better. Comes with a balcony.</p>
    </details>
    <details>
        <summary>Family Suite</summary>
        <p>A suite for families. Twice the size of the standard room, three times the number of beds and four balconies.</p>
    </details>
</div>

Answer 5

/* Handle for details */
const detailsElements = document.querySelectorAll("details");

function handleClickOnDetails() {
  // close all details
  let detailsOpened = document.querySelectorAll("details[open]");

  for (const item of detailsOpened) {
    // keep open only details clicked
    if (this != item) {
      item.removeAttribute("open");
    }
  }
}

detailsElements.forEach(function (item) {
  item.addEventListener("click", handleClickOnDetails);
});

<details>
  <summary>Some details 1</summary>
  <p>More info about the details.</p>
</details>

<details>
  <summary>Some details2 </summary>
  <p>More info about the details.</p>
</details>

Answer 6

Vue中的示例组件：

<template>
  <details @toggle="toggle" :open="openItem">
    <summary>
      <slot name="summary"/>
    </summary>
    <slot name="content"/>
  </details>
</template>
<script>
export default {
  props: {
    open: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      openItem: this.open,
    }
  },
  methods: {
    toggle({target}) {
      this.openItem = target.open
    }
  }
}
</script>

Answer 7

对于任何使用 React 或 ReactFramework 的人

ion-menu::part(container) {
border-radius: 25px;
}

你可以通过像这样的道具来控制它：

 <details
      open={true} // or false
      className=""
 >

Answer 8

无需检测切换/点击或使用 jQuery。只需遍历 document.querySelectorAll("details[open]") 的数组结果，用于打开的细节元素和 document.querySelectorAll("details:not([open])") 用于关闭的细节元素。（您还可以使用 CSS3 中的这些选择器设置关闭/打开详细信息元素的样式。）

Answer 9

您可以这样做：

<details id="element">
   <p>Details</p>
</details>

<script>
   var isOpen = ($("#element").attr("open") == "open");

   alert ("Open = " + isOpen);
</script>

检测细节元素的打开或关闭

9 个答案: