Как закрыть другие элементы открылся, если закрыть один

Question

Как закрыть другие элементы открылось, если щелкнуть закрытым один.Атрибут данных «aria-extended» имеет только другое значение.

<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 (не открыт) * ​​1012 *

• открыть нажал один и закрыть открыл 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>