边栏的Jquery和CSS销钉解锁问题

Question

I create One side panel. Which allow me to pin and Unpin opened sidebar. Sidebar open when we hover on it. and Pin it using click on pin image. Now I try to open sidebar onClick and want to remove onHover . How can i perform this. and I also want to add one functionality ie when I click on box for open sidebar, its by default pined. So I no need to pin it. So after open sidebar, whenever I click sidebar wan't closed. For close sidebar, I have to click on its box which we use for open.

Here Is My Code

HTML

<ul id="dock">
            <li id="files">
                <ul class="free">
                    <li class="header"><a href="javascript:void(0);" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"  style = "padding-top: 12px;"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT=""  style = "padding-top: 12px;"></a><H5 ID="colorgreen">DISCOVER </h4></li>
                    <div id="accordion">
                      <h3>Section 1</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 1 content
                        </p>
                      </div>
                      <h3>Section 2</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 2 content
                        </p>
                      </div>
                      <h3>Section 3</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 3 content
                        </p>
                      </div>
                    </div>
                </ul>
            </li>

            <li id="tools">
                <ul class="free">
                    <li class="header"><a href="#" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Undock"></a><H5 ID="colorgreen">FACT FILE</H5></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
               </ul>
            </li>
        </ul>

JS

            $(document).ready(function(){
            var docked = 0;

            $("#dock li ul").height($(window).height());

            $("#dock .dock").click(function(){
                $(this).parent().parent().addClass("docked").removeClass("free");

                docked += 1;
                var dockH = ($(window).height()) / docked
                var dockT = 0;               

                $("#dock li ul.docked").each(function(){
                $(this).height(dockH).css("top", dockT + "px");
                dockT += dockH;
                });
                $(this).parent().find(".undock").show();
                $(this).hide();

                if (docked > 0)
                $("#content").css("margin-left","250px");
                else
                $("#content").css("margin-left", "60px");
            });

            $("#dock .undock").click(function(){
                $(this).parent().parent().addClass("free").removeClass("docked")
                .animate({right:"-80px"}, 200).height($(window).height()).css("top", "0px");

                docked = docked - 1;
                var dockH = ($(window).height()) / docked
                var dockT = 0;               

                $("#dock li ul.docked").each(function(){
                $(this).height(dockH).css("top", dockT + "px");
                dockT += dockH;
                });
                $(this).parent().find(".dock").show();
                $(this).hide();

                if (docked > 0)
                $("#content").css("margin-left", "40px");
                else
                $("#content").css("margin-left", "80px");
            });

            $("#dock li").hover(function(){
                $(this).find("ul").animate({right:"40px"}, 200);
                }, function(){
                    $(this).find("ul.free").animate({right:"-80px"}, 200);
                });
            }); 

CSS

                 #dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%; 
          z-index:9999; background-color:#f0f0f0; right:0px;}
    #dock > li {width:40px; height:8.3%; margin: 0 0 1px 0; background-color:#dcdcdc;
                 background-repeat:no-repeat; background-position:left center;}

    #dock #files {background-image:url(../images/menu.png);}
    #dock #tools {background-image:url(../images/menu.png);}

    /*#dock > li:hover {background-position:-40px 0px;}*/

    /* panels */
    #dock ul li {padding:5px; border: solid 1px #F1F1F1;}


    #dock > li:hover ul {display:block;}
    #dock > li ul {position:absolute; top:0px; right: 40px;  z-index:-1;width:180px; display:none;
                   background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;}
    #dock > li ul.docked { display:block;z-index:-2;}

    .dock,.undock{float:left;}
   .undock {display:none;}
    #sidepanelcontent {margin: 10px 0 0 60px;}

    #colorgreen {color:green;}

Here Is JsFiddle

Answer 1

Did you want something like this http://jsfiddle.net/W7sNp/1/

I added click event and moved some code from hover to it. Also little bit modified CSS

The tabs are not shown until you click the boxes

Edit:

I have added a fast example http://jsfiddle.net/W7sNp/3/ it ignores hover at all

HTML is the same

CSS

1. :hover selector is removed
2. changed #dock > li ul {position:absolute; top:0px; right: -40px; z-index:-1;width:0px; display:block; #dock > li ul {position:absolute; top:0px; right: -40px; z-index:-1;width:0px; display:block; now it is visible but moved out of view and has 0px width

Script

All functions moved to $("#dock li").click() and it decides to open or close tab by width

$(document).ready(function(){
            var docked = 0;

            $("#dock li ul").height($(window).height());


            $("#dock li").click(function(){
                    var test = $(this).find("ul").css('width');
                if (test=="0px"){
                    $(this).find("ul").addClass("docked").removeClass("free").animate({right:"40px",width:'180px'}, 200);
                    docked += 1;

                }else{
                    $(this).find("ul").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200);
                    docked = docked - 1;
                }
                console.log(docked);



                var dockH = ($(window).height()) / docked;
                var dockT = 0;               

                $("#dock li ul.docked").each(function(){
                $(this).height(dockH).css("top", dockT + "px");
                dockT += dockH;
                });


                if (docked > 0)
                $("#content").css("margin-left","250px");
                else
                $("#content").css("margin-left", "60px");
                });
            });