javascript - 无法关闭响应式菜单

Question

//toggle image
var plus = 'https://image.flaticon.com/icons/svg/149/149187.svg';
var minus = 'https://image.flaticon.com/icons/svg/128/128397.svg';

$('#resNavToggle').click(function() {
  if ($('.resNavIcon').attr('src') === plus) {
    $('.resNavIcon').attr('src', minus);
  } else {
    $('.resNavIcon').attr('src', plus)
  }
})


//open and close sub menu
$(document).ready(function(){
    $("img.resNavIcon").click(function(){
        $("ul.resNav").toggle();
		 
    });


    $("li.serviceLink").click(function(){
        $("ul.serviceNav").show();
		        $("ul.resNav").hide();
    });


    $("li.serviceNavClose").click(function(){
        $("ul.serviceNav").hide();
			        $("ul.resNav").show();
    });
});

.resNav       { display:none}
.serviceNav      { display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://image.flaticon.com/icons/svg/149/149187.svg" width="40" height="25"   class="resNavIcon"  id="resNavToggle">



<!-- Res Nav -->
<ul class="resNav">
<li><a href="">Main-menu</a></li>
<li class="serviceLink">Sub-menu ></li>
<li><a href="">Main-menu</a></li>
<li><a href="">Main-menu</a></li>
<li><a href="">Main-menu</a></li>
</ul>


<ul class="serviceNav">
<li class="serviceNavClose">< Main-menu</li>
<li><a href="">Sub-menu</a></li>
<li><a href="">Sub-menu</a></li>
<li><a href="">Sub-menu</a></li>

</ul>

我创建了一个非常简单的 2 层响应式菜单，请参阅: https://jsfiddle.net/wmxujcy4/2/

它需要一些教程才能让图像切换工作以显示相关的“打开”和“关闭”菜单图标。

而且我能够让子菜单按要求工作。根据 fiddle ，一切正常，直到您真正进入“子菜单”，然后按左上角的主要“关闭”图标 - 应该折叠两个菜单。

//toggle image
var plus = 'https://image.flaticon.com/icons/svg/149/149187.svg';
var minus = 'https://image.flaticon.com/icons/svg/128/128397.svg';

$('#resNavToggle').click(function() {
  if ($('.resNavIcon').attr('src') === plus) {
    $('.resNavIcon').attr('src', minus);
  } else {
    $('.resNavIcon').attr('src', plus)
  }
})


//open and close sub menu
$(document).ready(function(){
    $("img.resNavIcon").click(function(){
        $("ul.resNav").toggle();

    });


    $("li.serviceLink").click(function(){
        $("ul.serviceNav").show();
                $("ul.resNav").hide();
    });


    $("li.serviceNavClose").click(function(){
        $("ul.serviceNav").hide();
                    $("ul.resNav").show();
    });
});

但是两个菜单都卡住了，并且显示了错误的图标，而不是折叠两个菜单。请有人帮忙。

Answer 1

您可以检查子菜单是否可见。如果是，则隐藏两个 ul。

//toggle image
var plus = 'https://image.flaticon.com/icons/svg/149/149187.svg';
var minus = 'https://image.flaticon.com/icons/svg/128/128397.svg';

$('#resNavToggle').click(function() {
  if ($('.resNavIcon').attr('src') === plus) {
    $('.resNavIcon').attr('src', minus);
  } else {
    $('.resNavIcon').attr('src', plus)
  }
});


//open and close sub menu
$(document).ready(function() {
  $("img.resNavIcon").click(function() {
    if ($("ul.serviceNav").is(":visible")) {
      $("ul.resNav").hide();
      $("ul.serviceNav").hide();
    } else {
      $("ul.resNav").toggle();
    }
  });

  $("li.serviceLink").click(function() {
    $("ul.serviceNav").show();
    $("ul.resNav").hide();
  });

  $("li.serviceNavClose").click(function() {
    $("ul.serviceNav").hide();
    $("ul.resNav").show();
  });
});

.resNav {
  display: none
}

.serviceNav {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://image.flaticon.com/icons/svg/149/149187.svg" width="40" height="25" class="resNavIcon" id="resNavToggle">



<!-- Res Nav -->
<ul class="resNav">
  <li><a href="">Main-menu</a></li>
  <li class="serviceLink">Sub-menu &gt;</li>
  <li><a href="">Main-menu</a></li>
  <li><a href="">Main-menu</a></li>
  <li><a href="">Main-menu</a></li>
</ul>


<ul class="serviceNav">
  <li class="serviceNavClose">&lt; Main-menu</li>
  <li><a href="">Sub-menu</a></li>
  <li><a href="">Sub-menu</a></li>
  <li><a href="">Sub-menu</a></li>
</ul>