外をクリックするとドロップダウンメニューが表示されます

Question

私のサイトのナビゲーションドロップダウンには問題がありますが、私はほとんど解決していますが、修正できません。私はちょうど私のコードから混乱を起こしたかもしれないと心配しています。

preventDefaultイベントで「アンカータグへのスクロール」機能を導入したときに、ナビゲーションメニューが表示されませんでした。もう一度メニューボタンをクリックしない限り、メニューは閉じません。私は最終的にあなたがリンクの1つをクリックした後にそれを閉じるようにしましたが、それは今それを閉じるための唯一の方法です。メニューボタンをクリックするか、サイトのどこか他の場所をクリックすると、どうすれば閉じることができますか？私はjQueryの少しが原因だと確信していますが、それを修正する方法やそれを回避する方法はわかりません。

メニューのためのHTML：

<div class="main-nav navbtn"> 
    <div class="dropdown"><i onclick="myFunction()" class="dropbtn material-icons md-48">&#xE5D2;</i> 
     <div id="myDropdown" class="dropdown-content"> 
     <a href="#home" class="home navlink">Home</a> 
     <a href="#about" class="navlink">About</a> 
     <a href="#services" class="navlink">Services</a> 
     <a href="#work" class="navlink">Work</a> 
     <a href="#testimonials" class="navlink">Testimonials</a> 
     <a href="#contact" class="navlink">Contact</a> 
     <a href="http://blog.ignitiondesignpdx.com" target="_blank" class="external navlink">Blog</a> 
     </div> 
    </div> 
    </div> 

および関連のjQuery：

// When the user clicks on the button, toggle between hiding and showing the dropdown content 
function myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 

//// Close the dropdown menu if the user clicks outside of it 
window.onclick = function (event) { 
    if (!event.target.matches('.dropbtn')) { 
    dropdowns.forEach(function (openDropdown) { 
     dropdown.classList.contains('show') && dropdown.classList.remove('show'); 
    }); 
    } 
}; 

////This is the section I made for it to close after clicking a link 
jQuery(document).ready(function ($) { 
    $('.dropbtn').on('click', function() { 
    $(".dropdown-content").show(); 
    }); 
    $('.navlink').on('click', function() { 
    $(".dropdown-content").hide(); 
    }); 
}); 

これは、他の機能を台無しだ潜在的な問題があります。

//Scroll to anchor tags 
$(document).on('click', 'a:not(.external)', function (event) { 
    event.preventDefault(); 

    $('html, body').animate({ 
    scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
}); 

var $root = $('html, body'); 
$('a').click(function() { 
    $root.animate({ 
    scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
    return false; 
}); 

メニューを修正するにはどうすればよいですか？

あなたがhttp://idpdx.kreigd.com

アップデートで作業中のサイトを見てみることができます：私は、私は物事が混乱しているところでリードを持っていると思います。私がドロップダウン機能を追加するために使用している関数では、.dropbtn要素がクリックされるとクラス "show"が追加され、再度クリックされると削除される必要があります。

私が本当にやる必要があるのは、.dropbtnをクリックするとドロップダウンが開き、ナビゲーションボタンと.dropbtn要素を含む何かをクリックするとコードが閉じるというコードを修正することです。

更新2：別の方法を試してください。その最初の更新を無視します。

Answer 1

私は

$(document).click(function() { 
    $(".dropdown-content").hide(); 
    // $(".dropdown-content").removeClass("show"); 
}); 

$(".dropdown-content").click(function(e) { 
    e.stopPropagation(); // if you click on the div itself it will cancel the click event. 
}); 

Answer 2

はあなたが私はあなたのウェブサイトのコードを試してみました。この

$('body').not("#myDropdown").off('click').on('click',function(){$("#myDropdown").removeClass("show")}); 

ようなもので試すことができます知っているこの&試してみてくださいしかし、あなたはあるwindow.click上のいくつかのコードを書かれています問題を引き起こす。