jquery和原生js分别实现点菜单

最新推荐文章于 2022-05-07 15:40:14 发布

weixin_43700362

最新推荐文章于 2022-05-07 15:40:14 发布

阅读量199

点赞数

文章标签：操作节点 jquery 原生js

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103284621

版权

本文介绍了如何使用jQuery和原生JavaScript来实现在不同菜单间移动选项的功能。通过点击左右按钮，选中的菜单项可以在box1与box3之间互相转移。在jQuery实现中，利用`.parent()`和`.remove()`方法移动并删除元素，而在原生JS实现中，将涉及对DOM元素的选择、操作及状态管理。

摘要由CSDN通过智能技术生成

jquery实现的大概思路：

在box1里面有几个li，li里是复选框，里面是菜品名称，可以同时选择多个li。
在box2里存放左右按钮，
点右按钮时，把box1被选的菜品删除，并且在box3里加入；
点左按钮的时候，把box3被选的菜品删除，并且在box1里加入；
box3里面暂时存放ul，以便接受box1添加过来的菜品。

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    div{
        width:200px;
        height:200px;
        border:2px solid gray;
        float: left;
    }
</style>
<body>
<div class="box1">
    <ul>
        <li>  <input type="checkbox">海鱼 </li>
        <li>  <input type="checkbox">土鸡 </li>
        <li>   <input type="checkbox">龙虾 </li>
        <li>  <input type=