有两个div分别是菜单和记录菜单的,当选择菜单的菜后会消失进入盒子为记录菜单的里面,然后记录菜单里面又可以点击回去到菜单中的盒子中,并且要保证与最开始的菜单顺序一样,使用jquery
时间: 2024-03-03 21:53:49 浏览: 23
你可以使用jQuery的`append()`和`detach()`方法来实现这个功能。首先,你需要将菜单的选项绑定一个点击事件,然后在点击事件中将选中的菜单项从菜单盒子中移除并添加到记录菜单盒子中。代码示例如下:
```javascript
$("#menu-box").on("click", ".menu-item", function() {
var menuItem = $(this);
menuItem.detach();
$("#record-box").append(menuItem);
});
```
当你需要回到菜单盒子时,你可以将选中的记录菜单项从记录菜单盒子中移除并添加到菜单盒子中,同时保持与最开始的菜单顺序一致。你可以使用jQuery的`insertBefore()`方法来实现这个功能。代码示例如下:
```javascript
$("#record-box").on("click", ".menu-item", function() {
var menuItem = $(this);
var index = menuItem.index();
var prevMenuItem = $("#menu-box .menu-item:eq(" + index + ")");
menuItem.detach();
prevMenuItem.insertBefore("#menu-box .menu-item:eq(" + (index - 1) + ")");
});
```
在这个例子中,我们首先获取了当前记录菜单项在记录菜单盒子中的索引,然后找到对应索引在菜单盒子中的菜单项,并将选中的记录菜单项插入到它的前面。这样就能保证记录菜单项在回到菜单盒子后的位置与最开始的菜单顺序一致。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)