Question

<script>
        $(function() {
            // Clickable Dropdown
            $('.click-nav > ul').toggleClass('no-js js');
            $('.click-nav .js ul').hide();
            $('.click-nav .js').click(function(e) {
                $('.click-nav .js ul').slideToggle(200);
                $('.clicker').toggleClass('active');
                e.stopPropagation();
            });
            $(document).click(function() {
                if ($('.click-nav .js ul').is(':visible')) {
                    $('.click-nav .js ul', this).slideUp();
                    $('.clicker').removeClass('active');
                }
            });
        });
</script>

<div class="click-nav">
    <ul class="no-js">
        <li><a class="clicker"><span id="profile">Drop down</span></a>
            <ul>
                <li><a href="https://www.google.com">Google</a></li>
                <li><a href="https://www.facebook.com">Facebook</a></li>
            </ul>
        </li>
    </ul>
</div>

点击时下拉工作完美，但在手风琴滑动的任何其他位置点击手风琴或网页时会向上滑动。
下拉菜单中的链接不起作用，当鼠标悬停时，它们会显示在网页的左下角，但手风琴会向上滑动，而且点击时页面不会重定向。

Answer 1

嗯，每次点击文档时，你都会告诉手风琴会向上滑动。每次点击链接并执行时，此jQuery都会滑动，关闭手风琴并断开链接。你真的应该使用一些其他句柄来使手风琴向上滑动并将其作为jQuery选择器而不是$(document)。事实上，我会在同一个功能中处理手风琴的开启和关闭。

修改：此处是fiddle

Answer 2

您的代码工作正常，也没有错误。

1）当您编写代码以使用slideToggle（200）切换它时，下拉菜单会切换，当您单击文档时，如果下拉列表可见，它也会切换。

2）链接工作正常，他们正沿着这条路走。

您必须采取的唯一注意事项是不要单击“下拉”文本的任何位置，因为“click-nav”div的宽度为100％。

jQuery手风琴链接不起作用

2 个答案: