jQuery实现操作框的实现和隐藏功能

问题描述：如下图所示，要实现以下功能。
1、实现点击蓝色操作按钮，左边出现操作框。
2、再点击一次操作按钮，出现的操作框消失。
3、点击其他行的操作按钮，原先的出现操作框消失。
4、点击页面空白处，原先出现的操作框消失。


js代码如下：

<script type="text/javascript">
    var beforeButton=null;
    $(function(){

//      点击空白，操作面板消失
        $("body").click(function(){
            if(beforeButton!=null){
                beforeButton.next().attr("class","false");
                beforeButton.css({
                    "background-color":"white",
                    "color":"#0098e7",
                });
                beforeButton=null;
            }
        });

        $("#operationBody").click(function(e){
            e.stopPropagation();
        });

//         点击操作按钮，在按钮的左边弹出操作框
        $(".newsMoreContentMessage #newsMoreBusinessOper #newsMoreBusinessOperBody").click(function(e){


            var operationBodyTop=$(this).position().top+6;
            var operationBodyLeft=$(this).position().left-75;
            $(this).next().css({
                "top":operationBodyTop,
                "left":operationBodyLeft,
            });


            if('true'==$(this).next().attr("class")){
                $(this).next().attr("class","false");
                $(this).css({
                    "background-color":"white",
                    "color":"#0098e7",
                });
            }else{
                $(this).next().attr("class","true");
                $(this).css({
                    "background-color":"#0098e7",
                    "color":"white",
                });
            }

        //判断当前点击的按钮和前一次已点击的按钮是否为同一个
            var beforeButtonValue="";
            if(beforeButton!=null){
                 beforeButtonValue=beforeButton.parents("#newsMoreBusinessOper").attr("class");
            }
            var thisValue=$(this).parents("#newsMoreBusinessOper").attr("class");
            if(beforeButton!=null&&beforeButtonValue!=thisValue){

                beforeButton.next().attr("class","false");
                beforeButton.css({
                    "background-color":"white",
                    "color":"#0098e7",
                });
                beforeButton=null;
            }
            beforeButton=$(this);
            e.stopPropagation();
        });


    $(window).resize(function(){
        $(".newsMoreContentMessage #newsMoreBusinessOper #newsMoreBusinessOperBody").click(function(){
            var operationBodyTop=$(this).position().top+6;
            var operationBodyLeft=$(this).position().left-75;
            $(".newsMoreContentMessage #newsMoreBusinessOper #operationBody").css({
                "top":operationBodyTop,
                "left":operationBodyLeft,
            });

        });
    });
</script>

jsp代码如下：

<div id="newsMoreBusinessOper" class="<%=index%>">
                <div id="newsMoreBusinessOperBody">+操作</div>
                <div id="operationBody" class="false">
                     <div><a href="http://www.baidu.com">详细信息</a></div>
                     <div><img src="/Jxdoe-BusinessManager-portlet/img/delete.png"></img>删除</div>
                </div>
</div>

主要知识点如下：
1、e.stopPropagation()
e.stopPropagation();就是阻止冒泡，冒泡会从最里层，也就是你点击的位置以此向外触发事件，比如点击事件……
在这里添加了e.stopPropagation();之后，除了点击处的事件，它的父元素事件就不会被触发了，因为已经被阻止了。

在jQuery中，其实这句也可也用 return false来替代，但是在JS中不行。

备注：在jQuery中，return false在使用上等于 stopPropagation() 加 preventDefault()

如果在JS中使用stopPropagation()方法阻止事件的传递。

需要html元素以事件event作为参数传到调用方法中，如下代码所示：

<input type="button" value="点击" id="but12" onclick="mb(event)">
function mb(event){
        //console.log($(item).attr("valss"));
        $("#ul12").toggleClass("change");
        event.stopPropagation();
    }

或者在JS中，首先获取元素对象，然后设置该对象的事件，此时和上面jQuery的类似。代码如下：

document.getElementById("but12").onclick=function mb(eve){
        alert("button方法");
        eve.stopPropagation();
    }