0

我创建一个侧边栏/面板，您可以在此处查看演示 (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);
        }

    });
});
4

2 回答 2

1

问题是，因为您的面板 ( ul.free) 在li#files/内li#tools，所以当您的面板被单击时，这些元素也会收到一个单击事件（因为单击事件会上升到所有父级，直到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。

于 2013-09-11T07:12:05.553 回答
0

请试试这个。

#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();
                                                       });
                });
于 2013-09-11T07:01:18.637 回答