簡體   English   中英

jQuery手風琴鏈接不起作用

[英]jQuery Accordion Links Don't Work

<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>
  1. 單擊時下拉菜單非常完美,但是單擊手風琴或在手風琴滑動的任何其他位置均可使網頁向上滑動。
  2. 下拉列表中的鏈接不起作用,當錨點位於鼠標上方但手風琴向上滑動且單擊時頁面未重定向時,它們會顯示在網頁的左下方。

好吧,您要告訴手風琴每次單擊文檔時都向上滑動。 每次單擊鏈接並首先執行時,此jQuery都會滑入,關閉手風琴並斷開鏈接。 您確實應該使用其他手柄來使手風琴向上滑動,並將其作為jQuery選擇器而不是$(document) 實際上,我將在同一功能中處理手風琴的打開和關閉。

編輯:這是一個小提琴

您的代碼運行正常,也沒有錯誤。

1)當您編寫了使用slideToggle(200)進行切換的代碼時,下拉菜單就會切換,並且在您可以看到下拉菜單的任何位置單擊文檔時,也會切換下拉菜單。

2)鏈接工作正常,它們遵循路徑。

唯一需要注意的是,不要單擊與“下拉”文本平行的任何位置,因為“ click-nav” div的寬度為100%。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM