Question

我正在尝试创建一个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();
    });
});

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

我希望一次点击展开和折叠多个菜单。

Answer 1

我无法看到toggle命令将实现什么，因为它与发布的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();
    });
});

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

展开所有菜单并关闭它们

2 个答案: