javascript - 在单击标签中的内容后应用 closeAll 后保持 标签打开

Question

我用过<details>和 <summary>标签来创建带有按钮的可折叠菜单以打开页面上的某些元素，但是当我单击一个按钮时它会关闭折叠的菜单。单击该菜单中的按钮后，如何使折叠菜单保持打开状态？

我用过onclick="closeAll()"在我打开一个菜单时关闭所有菜单，但只需要在我单击该菜单中的按钮后让我所在的菜单保持打开状态(以向用户显示他们导航的位置)。

这是我的部分代码:

<details onclick="closeAll()">
  <summary>
    <div class="menubut" id="butmotors"><img src="gfx/menu_motors.png" /></div>
  </summary>
  <input type="button" value="Your Garage" class="sub_but" onclick="your_garage();"><br />
  <input type="button" value="Travel By Car" class="sub_but" onclick="travel();"><br />
  <input type="button" value="Car Dealership" class="sub_but" onclick="car_dealership();"><br />
  <input type="button" value="Street Race" class="sub_but" onclick="street_racer();"><br />
  <input type="button" value="Gas Station" class="sub_but" onclick="show_gas_station();">
</details>';

function closeAll() {
  var i, a = document.getElementsByTagName('details');
  for (i in a) {
    a[i].open = '';
  }
}

Answer 1

我要做的第一件事就是停止使用内联事件属性。

然后，为了能够将事件处理程序绑定(bind)到另一个也有事件处理程序的元素的子元素(您的按钮)，您需要知道的技巧是 jQuery .stopPropagation() .

这是为了防止事件冒泡到父...

下面(作为奖励)，我只为所有按钮使用了一个绑定(bind)到 sub_but 类的函数。然后，使用 switch() , 根据点击按钮的值决定做什么。

details标签很有趣。我不知道这件事。它有一个 bool 属性来展开/折叠它...但令人惊讶的是，值是 false 折叠或 "" 打开(true似乎行不通……很高兴知道这一点)。

// The arrow click handler
$("details").on("click",function(){
  console.log("You clicked on the detail arrow");
  
  // Close all other details tags.
  $("details").each(function(){
    this.open = false;
  });
});

// The button click handler
$(".sub_but").on("click",function(event){

  // To top the event from bubbling up
  event.stopPropagation();
  
  // Evaluate which button was clicked
  switch(this.value){
    case "Your Garage":
      console.log("You clicked Your Garage");
      // Do something specific here...
      break;
    
    case "Travel By Car":
      console.log("You clicked Travel By Car");
      // Do something specific here...
      break;
    
    case "Car Dealership":
      console.log("You clicked Car Dealership");
      // Do something specific here...
      break;
    
    case "Street Race":
      console.log("You clicked Street Race");
      // Do something specific here...
      break;
    
    case "Gas Station":
      console.log("You clicked Gas Station");
      // Do something specific here...
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<details>
  <summary>
    <div class="menubut" id="butmotors"><img src="gfx/menu_motors.png" /></div>
  </summary>
  <input type="button" value="Your Garage" class="sub_but"><br />
  <input type="button" value="Travel By Car" class="sub_but"><br />
  <input type="button" value="Car Dealership" class="sub_but"><br />
  <input type="button" value="Street Race" class="sub_but"><br />
  <input type="button" value="Gas Station" class="sub_but">
</details>

<details>
  <summary>
    Some other details...
  </summary>
  What could be interesting to know?
</details>

由于控制台日志，最好在整页中尝试该代码段...