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/

它采用了一些教程来使图像切换工作，以显示相关的“打开”和“关闭”菜单图标。

我能够根据需要使子菜单工作。根据小提琴一切正常，直到你实际上在'子菜单'然后按下左上方的主'关闭'图标 - 应该折叠两个菜单。

//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。

＆＃13;

//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();
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以检查子菜单是否可见隐藏其他切换

$("img.resNavIcon").click(function(){
        if($("ul.serviceNav").is(":visible")){
            $("ul.serviceNav").hide();
      }else{
        $("ul.resNav").toggle();
      }

    });

无法获得响应式菜单关闭

2 个答案: