展开所有菜单并关闭它们答案

【问题标题】：Expand all menus and close them展开所有菜单并关闭它们
【发布时间】：2015-11-20 13:58:52
【问题描述】：

我正在尝试制作一个单击即可展开和关闭所有菜单的 jquery 脚本。另外，我需要把它全部折叠起来。

这是我目前写的代码：

HTML：

<span class="expand"><span class="plus"><a href="javascript:;"><img src="/images/icons/icon-plus.png" /></a></span><span class="minus"><a href="javascript:;"><img src="/images/icons/icon-minus.png" /></a></span></span>

CSS：

    .plus > a > img {
    border: none;
    margin-right: 5px;
    margin-top: 8px;
    display: block;
}
.minus {
    display: none;

jQuery:

$(document).ready(function(){
    $('plus').on('click' , function() {
        $('.first-tab-at services-top services-top-toggle').toggle();
    });
});

因此，当单击“加号”图像时，我需要展开菜单，然后“减号”图像将出现在“加号”位置。单击“减号”图像会折叠菜单。

我想用这个一键展开和折叠多个菜单。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我看不到切换命令将实现什么，因为它与发布的 HTML 无关。但是，试试这个例子，看看你想用加号和减号图标实现什么 - https://jsfiddle.net/u83nkd3v/

$(document).ready(function () {
    $('.plus a img').on('click', function () {
        console.log('plus clicked');
        $('.first-tab-at services-top services-top-toggle').toggle();
        $('.plus').hide();
        $('.minus').show();
    });
    $('.minus a img').on('click', function () {
        console.log('minus clicked');
        $('.first-tab-at services-top services-top-toggle').toggle();
        $('.minus').hide();
        $('.plus').show();
    });
});

【讨论】：

我已将最后一个回复标记为正确，因为它帮助了我。这是我写的 jQuery 代码：jsfiddle.net/u83nkd3v/1

【解决方案2】：

下面的代码是实现您想要的几种方法之一。你错过了$('.plus').on('click', function() { 的句号，这对你没有帮助

$(document).ready(function() {
  $('.plus').on('click', function() {
      $('ul').removeClass('hidden');
      $('.minus').show();
      $('.plus').hide();
  });
   $('.minus').click(function() {
      $('ul').addClass('hidden');
       $('.plus').show();
      $('.minus').hide();
  });
  
});

.plus > a > img {
  border: none;
  margin-right: 5px;
  margin-top: 8px;
  display: block;
}
.minus {
  display: none;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span class="expand">
  <span class="plus">
    <a href="javascript:;">
      <img src="/images/icons/icon-plus.png" /> 
    </a>
  </span>
<span class="minus">
    <a href="javascript:;">
      <img src="/images/icons/icon-minus.png" /> 
     </a>
  </span>
<ul id="1" class="hidden">
  <li>1</li>
  <li>2</li>
</ul>
<ul id="2" class="hidden">
  <li>3</li>
  <li>4</li>
</ul>
</span>

【讨论】：