javascript - 单击相同按钮以使用 jquery 返回到原始位置

Question

1) 我正在创建一个垂直菜单，并在右上角设置了一个图像。用户可以在点击正在工作的图片后更改菜单的宽度，但我必须点击同一张图片才能回到相同的位置。

2)当菜单处于小位置时，如何改变菜单图像的大小？

请检查代码段输出。如果我单击菜单栏图像而不是垂直菜单的大小发生变化，我必须单击相同的菜单栏才能返回到相同的位置。

你愿意帮我吗？

$(document).ready(function() {
  // Show hide popover
  $(".active-dropdown").click(function() {
    $(this).find(".left-menu-dropdown").slideToggle("fast");
  });
});
$(document).ready(function() {
  $('#slide-left-menu').click(function() {
    $(".left-menu").animate({
      width: '100px'
    }, 'slow', 'linear', function() {
      $('.left-menu-list ul li span').remove();
    });
  })
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.left-menu {
  background-color: #ff0000;
  width: 37%;
  height: 100%;
  z-index: 4;
}

.left-menu .inside-left-menu {
  padding: 20px 15px;
}

.left-menu .left-menu-logo img {
  width: 50px;
}

.left-menu .left-menu-logo-text {
  width: 100px;
  display: inline-block;
  color: #000;
  vertical-align: middle;
}

.left-menu .left-menu-logo h2 {
  /* display: inline-block;*/
  font-size: 24px;
  text-align: right;
}

.left-menu .left-menu-logo h3 {
  font-size: 12px;
  text-align: right;
  margin: 0;
}

.left-menu .left-menu-logo h2 span,
.left-menu .left-menu-logo h3 span {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.left-menu .left-menu-list {
  margin-top: 30px;
}

.left-menu .left-menu-list ul.left-menu-main-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.left-menu .left-menu-list ul.left-menu-main-list li {
  padding: 10px 0;
}

.left-menu .left-menu-list ul.left-menu-main-list li.menu-top-border {
  content: "";
  border-top: 1px solid #000;
  margin-top: 20px;
}

.left-menu .left-menu-list ul.left-menu-main-list li a {
  color: #000;
  font-size: 13px;
  display: block;
}

.left-menu .left-menu-list ul.left-menu-main-list li a img {
  width: 20px;
  margin-right: 05px;
}

.left-menu .left-menu-list ul.left-menu-main-list li a span {
  vertical-align: middle;
  margin-left: 03px;
}


/*drop down*/

.left-menu .left-menu-list ul.left-menu-dropdown {
  list-style: none;
  display: none;
}

.minimize-left-menu {
  position: relative;
}

.minimize-left-menu img {
  width: 75px;
  position: absolute;
  right: -50px;
  top: 0;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="left-menu">
  <div class="minimize-left-menu">
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/66344-200.png" id="slide-left-menu">
  </div>

  <div class="inside-left-menu">
    <div class="left-menu-logo">
      <img src="http://www.newgeography.com/files/imagecache/Chart_Story_Inset/bigstock-happy-smiley-25475741.jpg">
      <div class="left-menu-logo-text">
        <h2><span>Logo</span>name</h2>
        <h3>by <span>slogan</span></h3>
      </div>
    </div>
    <!--left-menu-logo-->

    <div class="left-menu-list">
      <ul class="left-menu-main-list">
        <li>
          <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 1</span></a>
        </li>
        <li class="active-dropdown">
          <a href="JavaScript:void(0);"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2</span></a>
          <ul class="left-menu-dropdown">
            <li>
              <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/1</span></a>
            </li>
            <li>
              <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/2</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a href=""><img src="https://image.flaticon.com/icons/png/128/61/61391.png"><span>Example 3</span></a>
        </li>
        <li class="menu-top-border">
          <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 4</span></a>
        </li>
        <li>
          <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 5</span></a>
        </li>
      </ul>
    </div>
  </div>
  <!--inside-left-menu-->
</div>
<!--left-menu-->

Answer 1

您需要创建另一个函数来将其大小更改回当前您没有的原始大小，您也可以只.hide 跨度而不是 .remove所以你可以在以后的事件中再次展示它

$(document).ready(function() {
  // Show hide popover
  $(".active-dropdown").click(function() {
    $(this).find(".left-menu-dropdown").slideToggle("fast");
  });
  
  $('#slide-left-menu').click(function() {
    $(this).toggleClass('active');
    if (!$(this).hasClass('active')) {
      $(".left-menu").animate({
        width: '37%'
      }, 'slow', 'linear', function() {
        $('.left-menu-list ul li span').show();
      });
    } else {

      $(".left-menu").animate({
        width: '100px'
      }, 'slow', 'linear', function() {
        $('.left-menu-list ul li span').hide();
      });
    }
  })
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.left-menu {
  background-color: #ff0000;
  width: 37%;
  height: 100%;
  z-index: 4;
}

.left-menu .inside-left-menu {
  padding: 20px 15px;
}

.left-menu .left-menu-logo img {
  width: 50px;
}

.left-menu .left-menu-logo-text {
  width: 100px;
  display: inline-block;
  color: #000;
  vertical-align: middle;
}

.left-menu .left-menu-logo h2 {
  /* display: inline-block;*/
  font-size: 24px;
  text-align: right;
}

.left-menu .left-menu-logo h3 {
  font-size: 12px;
  text-align: right;
  margin: 0;
}

.left-menu .left-menu-logo h2 span,
.left-menu .left-menu-logo h3 span {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.left-menu .left-menu-list {
  margin-top: 30px;
}

.left-menu .left-menu-list ul.left-menu-main-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.left-menu .left-menu-list ul.left-menu-main-list li {
  padding: 10px 0;
}

.left-menu .left-menu-list ul.left-menu-main-list li.menu-top-border {
  content: "";
  border-top: 1px solid #000;
  margin-top: 20px;
}

.left-menu .left-menu-list ul.left-menu-main-list li a {
  color: #000;
  font-size: 13px;
  display: block;
}

.left-menu .left-menu-list ul.left-menu-main-list li a img {
  width: 20px;
  margin-right: 05px;
}

.left-menu .left-menu-list ul.left-menu-main-list li a span {
  vertical-align: middle;
  margin-left: 03px;
}


/*drop down*/

.left-menu .left-menu-list ul.left-menu-dropdown {
  list-style: none;
  display: none;
}

.minimize-left-menu {
  position: relative;
}

.minimize-left-menu img {
  width: 75px;
  position: absolute;
  right: -50px;
  top: 0;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="left-menu">
  <div class="minimize-left-menu">
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/66344-200.png" id="slide-left-menu">
  </div>

  <div class="inside-left-menu">
    <div class="left-menu-logo">
      <img src="http://www.newgeography.com/files/imagecache/Chart_Story_Inset/bigstock-happy-smiley-25475741.jpg">
      <div class="left-menu-logo-text">
        <h2><span>Logo</span>name</h2>
        <h3>by <span>slogan</span></h3>
      </div>
    </div>
    <!--left-menu-logo-->

    <div class="left-menu-list">
      <ul class="left-menu-main-list">
        <li>
          <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 1</span></a>
        </li>
        <li class="active-dropdown">
          <a href="JavaScript:void(0);"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2</span></a>
          <ul class="left-menu-dropdown">
            <li>
              <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/1</span></a>
            </li>
            <li>
              <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/2</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a href=""><img src="https://image.flaticon.com/icons/png/128/61/61391.png"><span>Example 3</span></a>
        </li>
        <li class="menu-top-border">
          <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 4</span></a>
        </li>
        <li>
          <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 5</span></a>
        </li>
      </ul>
    </div>
  </div>
  <!--inside-left-menu-->
</div>
<!--left-menu-->