Question

我找到了这个JSFiddle，我不知道如何修复它，因此用户可以通过单击内容中的任意位置而不是仅单击按钮来退出菜单。我不是多种选择，我无法理解它？

    $(document).ready(function() {
    $menuLeft = $('.pushmenu-left');
    $nav_list = $('#nav_list');

    $nav_list.click(function() {
        $(this).toggleClass('active');
        $('.pushmenu-push').toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');
    });
});

谢谢！

Answer 1

您可以点击$('html').click(function() { $nav_list.removeClass('active'); $('.pushmenu-push').removeClass('pushmenu-push-toright'); $menuLeft.removeClass('pushmenu-open'); });标记点击并隐藏菜单：

$nav_list.click(function(e) {
    e.stopPropagation();

这需要停止事件冒泡，因此您的第一个单击功能必须以

开头

{{1}}

一切都可以肯定地进行优化，但它应该给你一个开始。

以下是更新后的Fiddle。

Answer 2

在脚本中，我修改了相同的脚本，为内容区域设置了切换功能，文本区域为“Slideout Navigation”

<script type="text/javascript">
$(document).ready(function() {
    $menuLeft = $('.pushmenu-left');
    $nav_list = $('#nav_list');

    $nav_list.click(function() {
        $(this).toggleClass('active');
        $('.pushmenu-push').toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');
    });
});

$(document).ready(function() {
    $menuLeft = $('.pushmenu-left');
    $content_list = $('#contentpane');
    $content_list.click(function() {
        $(this).toggleClass('active');
        $('.pushmenu-push').toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');

    });
});
</script>

以下是对HTML页面所做的更改。我为内容添加了一个div，因此可以通过脚本

来检查它

<div class="container">

        <div class="main">
        <section class="buttonset">
            <div id="nav_list">Menu</div>
        </section>

    <section class="content">
    <div id="contentpane">
      <h1>Slideout Navigation</h1>
      <p>

      </p>
      </div>
    </section><!-- End Content -->
      </div><!-- End Main -->
</div><!-- End Container -->

从左侧推/滑菜单。需要点击整页隐藏菜单吗？

2 个答案: