javascript - 使 div 跟随另一个 div 的位置

Question

$('#notepad').hide();
$('#news').hide();
$('#todo').hide();

$('#notepadIcon').click(function(){
    $('#notepad').toggle();
});
$('#newsIcon').click(function(){
    $('#news').toggle();
});
$('#todoListIcon').click(function(){
    $('#todo').toggle();
});

$('button').click(function(){
    $('#todoListIcon').hide();
});

#todoListIcon,
#newsIcon,
#notepadIcon {
    font-size: 24px;
    cursor: pointer;
    margin-left: 100px;
    transition: 0.5s ease;
    display: inline-block;
    opacity: 0.8;
    color:#000;
}

#bottomRightIcons {
    bottom:15px;
    right:30px;
    position: fixed;
    display: inline-block;
}

#todo,
#news,
#notepad {
    width: 290px;
    height:250px;
    max-height: 350px;
    background-color:#000;
    position: fixed;
    bottom: 45px;
    right: 28px;
    border-radius: 3px;
}

#news {
    right: 152px;
}

#notepad {
    right: 277px;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hide todo</button>

<div id="bottomRightIcons">
        <div id="notepadIcon"><i title="Note Taker" class="fa fa-pencil-square-o"></i></div>
        <div id="newsIcon"><i title="News" class="fa fa-newspaper-o"></i></div>
        <div id="todoListIcon"><i title="Todo List" class="fa fa-th-list"><span id="notificationTodo" class="todoListNotification"></span></i></div>
    </div>

<div id="notepad"></div>
<div id="news"></div>
<div id="todo"></div>

首先，我决定制作一个 fiddle帮助显示我的问题。

如您所见，当您打开其中一个菜单时，它们会出现在正确的位置，但是一旦您隐藏其中一个图标，它们就不会跟随图标的位置。

理想情况下，我希望菜单 div 充当下拉菜单，因为它跟在图标后面。

有什么想法吗？欣赏它。

Answer 1

现在的问题是您的菜单有一个固定的 right 值，因此当您切换它们的位置时它保持不变。您需要重置菜单在切换时的位置。

我已将类 icon 和 menu 添加到相应的 div。

<div id="bottomRightIcons">
  <div id="notepadIcon" class="icon"><i title="Note Taker" class="fa fa-pencil-square-o"></i></div>
  <div id="newsIcon" class="icon"><i title="News" class="fa fa-newspaper-o"></i></div>
  <div id="todoListIcon" class="icon"><i title="Todo List" class="fa fa-th-list"><span id="notificationTodo" class="todoListNotification"></span></i></div>
</div>

<div id="notepad" class="menu"></div>
<div id="news" class="menu"></div>
<div id="todo" class="menu"></div>

//JS

$('button').click(function(){    
    $('#todoListIcon').hide();
    resetPosition();
});


function resetPosition() {
    $('.icon').each(function(i){
        var obj = $(this);
        var left = obj.offset().left;
        var width = obj.width();
        var bodyWidth = $('body').width();
        var right = bodyWidth - (left + width);
        $('.menu').eq(i).css({'right':right+'px'});
    });
}

Fiddle Demo