【发布时间】：2017-10-27 08:57:05
【问题描述】：
1) 我正在创建一个垂直菜单，并在右上角设置了一个图像。用户可以在单击正在工作的图像后更改菜单的宽度，但我必须单击相同的图像才能回到相同的位置。
2) 菜单在小位置时如何改变菜单图片的大小？
请检查 sn-p 输出。如果我点击菜单栏图像超过垂直菜单的大小变化，我必须点击同一个菜单栏才能回到同一个位置。
你会在这方面帮助我吗？
$(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-->【问题讨论】：
-
几种解决方案：可以检查宽度，可以使用 CSS 类。顺便说一句，不要两次调用
$(document).ready。把你所有的代码放在第一个;-)。 -
@NarendraVerna，您可以在下面看到我的较短解决方案
标签： javascript jquery html css