Question

我对jQuery和编码很新，并且一直试图让这个侧边栏工作。当您单击INFO链接时，会打开侧栏。目前您只能通过单击角落中的X来关闭侧边栏，但我还希望能够在单击主体区域时关闭侧边栏（但是当您单击侧边栏区域时不能关闭侧边栏）。我得到了这个工作，但后来我无法打开任何链接来查看我的项目（只有第二个项目，Frankenstein电子书，到目前为止有一个功能链接。）

另外，为什么你能够点击X所在线的整个宽度而不是单击X以关闭侧边栏？

我在这里看到了很多类似的问题，但是从来没有完全符合我的具体问题。任何帮助都会很棒，谢谢你！

以下是我的网站：Josh Diaz Portfolio

这是一个JSFiddle：JSFiddle

我的HTML：

<div class="wrap">
<!--Sidebar-->
<!--Info Panel-->
<div class="infoPanel">
    <nav class="closeBtn">  <a href="#">X</a>

    </nav>
    <div class="infoText">
            <h2>infoPanel</h2>

        <p>Copy goes here.</p>
    </div>
</div>
<section class="sidebar">
    <div class="sidebarNav">
        <nav>   <a class="infoLink" href="#">INFO</a>

        </nav>
    </div>
    <div class="content">
        <section class="projects">
            <div class="wrapper">
                <ul class="grid">
                    <li>    <a href="prj.html">
                    <div class="caption"><span>Image Go Here</span></div>
                    <img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
                </a>

                    </li>
                    <li>    <a href="prj.html">
                    <div class="caption"><span>Image Go Here</span></div>
                    <img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
                </a>

                    </li>
                    <li>    <a href="prj.html">
                    <div class="caption"><span>Images Go Here</span></div>
                    <img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
                </a>

                    </li>
                    <li>    <a href="prj.html">
                    <div class="caption"><span>Image Go Here</span></div>
                    <img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
                </a>

                    </li>
                </ul>
            </div>
        </section>
    </div>
</section>

我的JS：

        $(document).ready(function () {

        var menu = "close";

        $('.infoLink').click(function () {

            if (menu == "close") {
                $('.infoPanel').css('-webkit-transform', 'translate(0,0)');
                menu = "open";
            } else {
                $('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
                menu = "close";
            }
        });

        $('.closeBtn').click(function () {

            if (menu == "close") {
                $('.infoPanel').css('-webkit-transform', 'translate(0,0)');
                menu = "open";
            } else {
                $('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
                menu = "close";
            }
        });

    });

Answer 1

您可以尝试这样的事情：

您的HTML

<body>
   <div id="content"></div>
   <div id="sidebar"></div>
</body>

和你的JS

$('body').click(function(){
   $('#sidebar').hide(); //hide sidebar when body is clicked
});

$('#sidebar').click(function(e){
   e.stopPropagation(); //this call will cancel the execution bubble
});

我希望这有帮助。

Answer 2

另外，为什么你能够点击X所在线的整个宽度而不是单击X以关闭侧边栏？

由于$('.closeBtn')指的是div而非链接，请改用$('.closeBtn a')。

无论如何，还有另一种快速而又肮脏的方式（需要一些重构），但这个想法就在那里。如果它适用于您，我会添加评论：http://jsfiddle.net/Varinder/RfFSv/

    $(document).ready(function () {

        var menu = "close";            
        var $infoLink = $(".infoLink");
        var $infoPanel = $(".infoPanel");
        var $closeButton = $(".closeBtn a");
        var $document = $(document);

        $infoLink.on("click.nav",function (e) {
            e.preventDefault();
            e.stopPropagation();
            sidebar("open");
        });

        $closeButton.on("click.nav",function (e) {
            e.preventDefault();
            e.stopPropagation();
            sidebar("close");
        });

        $document.on("click.nav", function(e) {
            if ( !$infoPanel.is(e.target) && $infoPanel.has(e.target).length === 0 ) {
                 sidebar("close");
            }
        });

        function sidebar(action) {
            if (action == "open") {
                $('.infoPanel').css('-webkit-transform', 'translate(0,0)');
                menu = "open";
            } else if (action == "close") {
                console.log("stuff");
                $('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
                menu = "close";
            }
        }
    });

jQuery - 单击正文区域时隐藏菜单/侧边栏

2 个答案: