Question

如果单击关闭一个元素，则如何关闭其他元素已打开。数据属性“ aria扩展”只是不同的值。

<ul id="mobile-menu-mobile">
<li><!-- mobile menu 1 -->
    <a href=#>menu1</a>
    <button aria-expanded="true"></button>
    <ul>...sub-menu...</ul>
</li>
<li><!-- mobile menu 2 -->
    <a href=#>menu1</a>
    <button aria-expanded="false"></button>
    <ul>...sub-menu...</ul>
</li>
<li><!-- mobile menu 3 -->
    <a href=#>menu1</a>
    <button aria-expanded="false"></button>
    <ul>...sub-menu...</ul>
</li>
<li><!-- mobile menu 4 -->
    <a href=#>menu1</a>
    <button aria-expanded="false"></button>
    <ul>...sub-menu...</ul>
</li>
</ul>

我希望

打开菜单1而其他菜单未打开
单击菜单2或3,4（未打开）
打开单击一个并关闭打开的li

有一个聪明的解决方案吗？

这是我的尝试

var bData = jQuery("#mobile-menu-mobile li button").attr("aria-expanded"); 
console.log(bData); 
if (bData === "false") { ????? }

Answer 1

你是这个意思吗？

您可以单击按钮或链接

$(function() {
  $(">li>a, >li>button","#mobile-menu-mobile") // link or button
    .on("click touchstart",function(e) { // click or touch on mobile
    e.preventDefault(); // cancel link
    $("[aria-expanded]").attr("aria-expanded",false); // toggle whatever is true
    $("#mobile-menu-mobile>li>ul").slideUp("fast"); // close all
    $(this).parent().find("[aria-expanded]").attr("aria-expanded",true); // set the aria-expanded
    $(this).nextAll("ul").slideDown("slow"); // open the UL
  });  
  $("#mobile-menu-mobile>li>button[aria-expanded=true]").prev().click(); // initialise
});

#mobile-menu-mobile>li>ul { display:none }}
[aria-expanded=true] { background-color:green; color:yellow }
[aria-expanded=false] { background-color:red; color:white }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mobile-menu-mobile">
  <li>
    <!-- mobile menu 1 -->
    <a href=#>menu1</a>
    <button aria-expanded="true"></button>
    <ul>...sub-menu...</ul>
  </li>
  <li>
    <!-- mobile menu 2 -->
    <a href=#>menu1</a>
    <button aria-expanded="false"></button>
    <ul>...sub-menu...</ul>
  </li>
  <li>
    <!-- mobile menu 3 -->
    <a href=#>menu1</a>
    <button aria-expanded="false"></button>
    <ul>...sub-menu...</ul>
  </li>
  <li>
    <!-- mobile menu 4 -->
    <a href=#>menu1</a>
    <button aria-expanded="false"></button>
    <ul>...sub-menu...</ul>
  </li>
</ul>

单击关闭一个元素后如何打开其他元素

1 个答案: