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

时间：2017-10-27 08:57:06

标签： javascript jquery html css

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

6 个答案:

答案 0 :(得分：1)

您需要创建另一个功能，将其尺寸更改为原始版本（目前您还没有），而且您只需.hide版本而不是.remove，这样您就可以再次展示它在以后的活动中

＆＃13;
＆＃13; 
$(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();
      });
    }
  })
});
＆＃13; 
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;
}
＆＃13; 
<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-->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这是一个有效的例子：

  $(document).ready(function() {
    // Show hide popover
    $(".active-dropdown").click(function() {
      $(this).find(".left-menu-dropdown").slideToggle("fast");
    });

    $('#slide-left-menu').click(function() {

      // Define the width with the class
      // Note: you could also use the class itself to define
      // the width
      // You can set the values you want

      let width = $(".left-menu").hasClass('closed') ? '37%' : '100px' ;

      // The method to hide or show text
      // (notice: 'hide' is better than 'remove'

      let methVisi = $(".left-menu").hasClass('closed') ? 'show' : 'hide' ;

      $(".left-menu").animate({

        // Either 100px -> 37%, or 37% -> 100px
        width: width

      }, 'slow', 'linear', function() {
        $('.left-menu-list ul li span')[methVisi]();
      });

      // To add or remove the 'closed' class to the menu

      let method = $(".left-menu").hasClass('closed') ? 'removeClass' : 'addClass'
      $(".left-menu")[method]('closed');
    })
  });
  
      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;}
      .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;}
      /* HERE TO CHANGE THE ICONE SIZE */
      .left-menu.closed img {
        width: 40px;
        transition: width 0.8s;
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>
    <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></div>

答案 2 :(得分：1)

最简单的方法是使用jQuery在菜单上添加活动类。

单击图像时，应使用单击功能打开和关闭活动类。

喜欢这个

$(document).ready(function() {
    $("img#slide-left-menu").click(function(){
    $(".left-menu").toggleClass("active");
  });
});

https://jsfiddle.net/dmz9gqxL/1

答案 3 :(得分：0)

试试以下内容。 您可以使用变量来记住菜单的状态和菜单的原始宽度。

$(document).ready(function() {
  // Show hide popover
  $(".active-dropdown").click(function() {
    $(this).find(".left-menu-dropdown").slideToggle("fast");
  });
});
$(document).ready(function() {
  var menuState = true;
  var menuWidth = null
  $('#slide-left-menu').click(function() {
    if(menuWidth === null) {
      menuWidth = $(".left-menu").width();
    }
    if(menuState) {
      $(".left-menu").animate({
        width: '100px'
      }, 'slow', 'linear', function() {
        $('.left-menu-list ul li span').remove();
        menuState = false;
      });
    } else {
      $(".left-menu").animate({
        width: menuWidth + 'px'
      }, 'slow', 'linear', function() {
        $('.left-menu-list ul li span').remove();
        menuState = true;
      });
    }
  })
});
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-->

答案 4 :(得分：0)

您可以使用临时课程，例如打开以记住菜单的情况：

 $('#slide-left-menu').click(function() {

   if ($(".left-menu").hasClass("open"){
        $(".left-menu").removeClass("open");
        $(".left-menu").animate({width: '50px'}, 'slow', 'linear'); //and your extra callback codes
  }

   else {
    $(".left-menu").addClass("open");
    $(".left-menu").animate({width: '100px'}, 'slow', 'linear');
   }

});

也不要使用remove()暂时隐藏元素。请改用hide()。

答案 5 :(得分：0)

另一个解决方案，由@ user3416331启发，但满足所有要求（甚至更多）：

  • 更改菜单宽度
  • 更改徽标大小
  • 隐藏菜单项
  • 和+：减小“Logoname”的宽度以适应新的宽度

（只需将'name'放在span标记中） 

  $(document).ready(function() {

    $(".active-dropdown").click(function() {
      $(this).find(".left-menu-dropdown").slideToggle("fast");
    });

    $('#slide-left-menu').click(function() {
      $('.left-menu').toggleClass('collapsed');
    })
  });
 html,body {margin: 0;padding: 0;height: 100%;}.left-menu {background-color: #ff0000;height: 100%;z-index: 4;}
.left-menu .inside-left-menu {padding: 20px 15px;}
.left-menu .left-menu-logo-text {width: 100px;display: inline-block;color: #000;vertical-align: middle;}
.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;}
.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;}

/* ======== TAKE A LOOK HERE ============= */
.left-menu:not(.collapsed) .left-menu-logo h2 {
  font-size: 24px;
  text-align: right;
}

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

.left-menu {
  width: 37%!important;
  transition: .8s!important;
}
.left-menu .left-menu-logo img {
  width: 50px;
  transition: .8s;
}
.left-menu.collapsed .left-menu-logo img {
  width: 35px;
  transition: .8s;
}

.left-menu.collapsed {
  width: 100px!important ;
  transition: .8s!important;
}
.left-menu.collapsed .left-menu-list ul li span {
  opacity: 0;
  transition: .8s;
}
.left-menu.collapsed .left-menu-logo-text span {
  font-size:  0.6em;
  transition: .8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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><span>name</span></h2><h3>by <span>slogan</span></h3></div></div>
<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></div>

相关问题
最新问题