jQuery边栏/面板关闭问题

Question

我创建了一个侧边栏/面板，您可以在此处查看演示（JsFiddle）

问题是，每当我单击“关闭”时，就在侧面板上。 我需要的是仅在单击用于打开侧面板的框时才关闭侧面板。

这是我的代码。

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>

jQuery的

$(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") {
            $(".docked").addClass("free").removeClass("docked").animate({
                right: "-40px",
                width: '0px'
            }, 200);
            $(this).find("ul").addClass("docked").removeClass("free").animate({
                right: "40px",
                width: '180px'
            }, 200);

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

    });
});

Answer 1

问题是，因为您的面板（ ul.free ）位于li#files / li#tools ，所以当您单击面板时，这些元素也会收到一个click事件（因为click事件将归所有父级处理，直到stopPropagation()被调用）。

您可以通过以下方法解决此问题，只需在侧边栏列表项中添加一个附加元素，如下所示：

<ul id="dock">
    <li id="files">
        <div class="handler"></div>
        <ul class="free">...</ul>
    </li>
    <li id="tools">
        <div class="handler"></div>
        <ul class="free">...</ul>
    </li>
</ul>

比将click事件绑定到此处理程序div：

$(document).ready(function(){
    $("#dock .handle").click(function(){
        var test = $(this).next("ul").css('width');
        if (test=="0px") {
            $(".docked").addClass("free")
                .removeClass("docked")
                .animate({right:"-40px",width:'0px'}, 200);
            $(this).next("ul").addClass("docked")
                .removeClass("free")
                .animate({right:"40px",width:'180px'}, 200);
        } else {
            $(this).next("ul").addClass("free")
                .removeClass("docked")
                .animate({right:"-40px",width:'0px'}, 200);
        }
    });
});

我还更新了您的jsFiddle 。

Answer 2

请尝试这个。

#files li内部的嵌套ul也会响应代码中的单击。 但是我们可以通过使用stopPropagate（）来防止这种情况，这将阻止处理程序与父元素相关联。

jQuery的

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

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


                $("#dock li").click(function(event){
                        var test = $(this).find("ul").css('width');

                    if (test=="0px"){
$(".docked").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200);                      $(this).find("ul").addClass("docked").removeClass("free").animate({right:"40px",width:'180px'}, 200);

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

                    });
                                $("#dock li ul").click(function(event)
                                                       {
                                                           event.stopPropagation();
                                                       });
                });