单击后将div重置为其原始位置

Question

我有这个应用程序，它在单击按钮JsFiddle后显示了小窗口

 $('.modules').draggable(); $('.glyphicon').click(function() { $(this).next('.modules').slideToggle(); }); 

 .glyphicon { font-size: 2em; color: #A70000; position:absolute; z-index: 10; display: block; } .glyphicon:hover { cursor: pointer; color: #000; } .modules{ position: absolute; width: 30%; box-shadow: 5px 5px 15px #000; z-index: 5; display: none; overflow: hidden; } .modules_box { color: white; background-color: rgba(159,159,159,0.8) } .module img{ padding: 5px; } #module1 { left: 10%; top: 7%; } #button_module1 { left: 10%; top: 7%; } 

 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <span id="button_module1" class="glyphicon glyphicon-info-sign"></span> <div class="modules" id="module1" draggable="true"> <img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/> <div class="modules_box"> <h5>DANE:</h5> <ul> <li>Parametr 1: 500</li> <li>Parametr 2: 700</li> <li>Parametr 3: 1500 cm</li> </ul> </div> </div> 

Windows是可拖动的，因此用户可以移动它们。 我要实现的是在隐藏窗口之后重置窗口位置，以便它始终显示在其原始位置。 我想要的通用解决方案不需要为每个窗口编写单独的代码。 使用绝对位置将在不同位置放置许多窗口。 有什么建议可以实现吗？

Answer 1

在切换状态下重置'style'属性将确保模块始终恢复到样式表中的原始位置。

if(!$this.is(":visible")){
    $this.attr('style','');
}

http://jsfiddle.net/vrww6fcm/3/