title: jQuery selector including attribute and sibling selectors not working
body: <p>I have a mobile menu which opens when an icon is clicked. Most of the menu links lead to other pages, but there are also local links with <code>href='#xxxx'</code> attributes, with same-page-IDs as their link target.</p>
  
  <p>The opening and closing of the menu is triggered by a jQuery script which works when the icon is clicked (in the snippet below: the red square).</p>
  
  <p>When clicking a local link leading to an ID further down on the page, the menu remains open, which it shouldn't. I tried to add a script to close the menu when any menu item is clicked, but the selector in that script doesn't seem to work. </p>
  
  <p>Here's the non-working version - note the <strong>jQuery selector combining an attribute selector and a sibling selector with others</strong>. This is the mobile version only, I left out all the media queries.</p>
  
  <p>Note: The very same selector works in CSS (last rule):</p>
  
  <p>(BTW: The HTML code for the menu is generated by Wordpress)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Toggle mobile menu when clicking on the nav icon
  jQuery('#navicon_1').on('click', function() {
    jQuery('#main_nav').slideToggle(300);
    jQuery(this).attr("aria-expanded", function(i, attr) { //change expanded-status 
      return attr === 'true' ? 'false' : 'true';
    });
  });
  
  //close mobile menu when clicking any menu icon
  jQuery("#navicon_1[aria-expanded='true'] + #main_nav ul li.menu-item").on('click', function() {
    //alert("SHOULD WORK NOW");
    jQuery('#main_nav').hide(); //close menu
    jQuery('#navicon_1').attr("aria-expanded", function(i, attr) { //change expanded-status 
      return attr === 'true' ? 'false' : 'true';
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  #navicon_1 {
    position: absolute;
    right: 50px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: block;
    border: none;
    background: red;
    text-indent: -5000px;
  }
  
  #main_nav {
    display: none;
    position: absolute;
    margin-right: -30px;
    top: 40px;
    overflow-y: auto;
    right: 40px;
    padding: 0 0 0 0;
    background: #fff;
    -webkit-box-shadow: -2px 10px 10px #aeaeae;
    box-shadow: -2px 10px 10px #aeaeae;
  }
  
  #main_nav&gt;ul {
    width: 230px;
    bottom: 0;
    text-align: left;
    padding: 8px 0 8px 10px;
  }
  
  #main_nav&gt;ul li {
    font-size: 17px;
    display: block;
    width: 100%;
    line-height: 1.6;
    padding: 4px 6px 4px 8px;
    background: #eee;
  }
  
  #navicon_1[aria-expanded='true']+#main_nav ul li.menu-item {
    background: #fb6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="navbar_top"&gt;
    &lt;div id="navicon_1" role="button" aria-expanded="false" aria-label="click to open and close the menu" tabindex="0"&gt;
    &lt;/div&gt;
    &lt;nav role="navigation" id="main_nav" tabindex="0"&gt;
      &lt;ul id="menu-hauptmenue" class="menu"&gt;
        &lt;li id="menu-item-157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-157"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-176"&gt;&lt;a href="#"&gt;Menu 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is a version where the selector is simplified, leaving out the attribute and sibling selectors. That one works: When you click on any of the menu entries, the menu closes. </p>
  
  <p>But I need to limit the function to the situation where <code>#navicon_1</code> has the "aria-expanded=true" status - otherwise the menu disappears on desktop when a local link is clicked:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Toggle mobile menu when clicking on the nav icon
  jQuery('#navicon_1').on('click', function() {
    jQuery('#main_nav').slideToggle(300);
    jQuery(this).attr("aria-expanded", function(i, attr) { //change expanded-status 
      return attr === 'true' ? 'false' : 'true';
    });
  });
  
  jQuery("#main_nav ul li.menu-item").on('click', function () {
   //alert("SHOULD WORK NOW");
    jQuery('#main_nav').hide();//close menu
    jQuery('#navicon_1').attr("aria-expanded", function(i, attr) {//change expanded-status 
          return attr === 'true' ? 'false' : 'true';
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  #navicon_1 {
    position: absolute;
    right: 50px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: block;
    border: none;
    background: red;
    text-indent: -5000px;
  }
  
  #main_nav {
    display: none;
    position: absolute;
    margin-right: -30px;
    top: 40px;
    overflow-y: auto;
    right: 40px;
    padding: 0 0 0 0;
    background: #fff;
    -webkit-box-shadow: -2px 10px 10px #aeaeae;
    box-shadow: -2px 10px 10px #aeaeae;
  }
  
  #main_nav&gt;ul {
    width: 230px;
    bottom: 0;
    text-align: left;
    padding: 8px 0 8px 10px;
  }
  
  #main_nav&gt;ul li {
    font-size: 17px;
    display: block;
    width: 100%;
    line-height: 1.6;
    padding: 4px 6px 4px 8px;
    background: #eee;
  }
  
  #navicon_1[aria-expanded='true']+#main_nav ul li.menu-item {
    background: #fb6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="navbar_top"&gt;
    &lt;div id="navicon_1" role="button" aria-expanded="false" aria-label="click to open and close the menu" tabindex="0"&gt;
    &lt;/div&gt;
    &lt;nav role="navigation" id="main_nav" tabindex="0"&gt;
      &lt;ul id="menu-hauptmenue" class="menu"&gt;
        &lt;li id="menu-item-157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-157"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-176"&gt;&lt;a href="#"&gt;Menu 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>