Question

我创建一个侧边栏/面板，您可以查看演示 Here (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内，当您点击面板时，这些元素也会收到点击事件（因为在调用stopPropagation()之前，click事件会发送给所有父母。

您可以通过简单地在侧边栏列表项中添加其他元素来解决此问题：

<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();
                                                       });
                });

Jquery边栏/面板关闭问题

2 个答案: