使用列表子项内带有链接的列表关闭下拉菜单

Question

我这里有一个下拉列表，其中包含社交媒体链接/图标的图像。这些图标下方是一个关闭按钮，也在列表内。我想要发生的是，当我单击按钮时，整个下拉菜单都会关闭。但是我的代码好像不行。

var indicator = 0;

$('.navigation-links-right > a.show').on('click', function(event) {
  event.preventDefault();
  
  if (indicator == 0) {
    $('a.show').css('background-color', '#2c2c2c');
    indicator = 1;
  } else if (indicator == 1) {
    $('a.show').css('background-color', 'transparent');
    indicator = 0;
  }
  
  $(this).parent().find('#sns-links').first().toggle();
  $(this).parent().siblings().find('#sns-links').hide();
});

$('.sns-links > li.btn-close').on('click', function(event) {
  $(this).parent().siblings().find('#sns-links').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="navigation-links-right">
  <a class="nav-links"><img src="images/icon/icon_nav_01.png"></a>
  <a href="#" class="show nav-links" data-toggle="dropdown"><img src="images/icon/icon_nav_02.png"></a>
  <div id="sns-links">
    <ul>
      <li><a href="#"><img src="images/icon/icon_sns_fb.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_blog.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_twitter.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_yt.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_ig.png"></a></li>
      <li class="btn-close"><a href="#"><img src="images/icon/icon_sns_close.png"></a></li>
    </ul>
  </div>
</div>

Answer 1

• 将class="sns-links" 添加到id="sns-links" 元素
• $('.sns-links > li.btn-close') > 选择器表示直接子级，因此不需要>，因为li 不是直接子级
• 要从关闭按钮中选择sns-links，请使用.closest()

var indicator = 0;

$('.navigation-links-right > a.show').on('click', function(event) {
  event.preventDefault();
  
  if (indicator == 0) {
    $('a.show').css('background-color', '#2c2c2c');
    indicator = 1;
  } else if (indicator == 1) {
    $('a.show').css('background-color', 'transparent');
    indicator = 0;
  }
  
  $(this).parent().find('.sns-links').first().toggle();
  $(this).parent().siblings().find('.sns-links').hide();
});

$('.sns-links li.btn-close').on('click', function(event) {
  $(this).closest('.sns-links').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="navigation-links-right">
  <a class="nav-links"><img src="images/icon/icon_nav_01.png"></a>
  <a href="#" class="show nav-links" data-toggle="dropdown"><img src="images/icon/icon_nav_02.png"></a>
  <div class="sns-links" id="sns-links">
    <ul>
      <li><a href="#"><img src="images/icon/icon_sns_fb.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_blog.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_twitter.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_yt.png"></a></li>
      <li><a href="#"><img src="images/icon/icon_sns_ig.png"></a></li>
      <li class="btn-close"><a href="#" class="close"><img src="images/icon/icon_sns_close.png"></a></li>
    </ul>
  </div>
</div>