Question

我正在尝试制作类似this的内容。

但不知何故，我无法使它变得相同。

我尝试了什么

我可以创建此副本，但问题是按钮已修复。

将left属性放在CSS中是否可以实现？

如果有任何可以引导我的话，那就太棒了。

感谢。

＆＃13;

( function($) {
	
		var map = new google.maps.Map(document.getElementById('new_map_canvas'), {
					zoom: 4,
					center: new google.maps.LatLng(57.658339,-102.918287),
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					mapTypeControl: false,
					streetViewControl: false,
					panControl: false,
					zoomControlOptions: {
						position: google.maps.ControlPosition.LEFT_BOTTOM
					}
				});
  
	$("#store_").click(function(){
		//$(".side_window_content").show("slide", { direction: "left" }, 1000 );
        $(".side_window_content").slideToggle();
	});
} )(jQuery);

＆＃13;

#new_map_canvas{
	border:5px solid;
}
#store_, #direction_{
	position:absolute;
	z-index:5;
	-webkit-transform: rotate(90deg);   
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.side_window, .side_window_content{
	position:absolute;
	z-index:6;
}
.side_window_content{
	width:300px;
	height:660px;
	background:white;
	display:none;
}
.side_window{
	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="side_window_content">
	<input type="text" id="searchStore" placeholder="Search address" />
</div>
<div class="side_window">
	<input type="button" id="store_" value="Store" />
	<input type="button" id="direction_" value="Direction" />
</div>
<div id="new_map_canvas" style="height:660px; width:auto;"></div>

＆＃13;

Answer 1

这是我自己博客的代码。希望，你想要类似的一个：

$('#icox').on('click', function() {
    $(this).children().toggleClass('active');
    $('#menux').toggleClass('active');
});

然后在CSS中，你只需要使用margin-left: -300px;或使用css3 transform: translate。

编辑后：

以下是Working Demo

Answer 2

您可以使用动画宽度切换。 $('.side_window_content').animate({width: 'toggle'});

Answer 3

在@ Vikrant示例中进行了一些修改：

#icox {
    float: left;
    width: 60px;
    height: 60px;
    background-color: rgb(218, 218, 218);
}

http://jsfiddle.net/6H8xr/9/

用jQuery打开侧边栏窗口

3 个答案:

编辑后：