ユーザーのクリック/タップが外になると検索バーが消える

Question

私は合計JavaScriptの初心者です。ユーザーがトップバーに追加した検索アイコンをクリックしたときに表示される検索バーを作成しようとしています。私はこれを使用しましたtutorial

私は自分のニーズに適応しましたが、下のコードを追加すると（チュートリアルと同じですが）、何かが間違っているようです。

// Close the dropdown menu if the user clicks outside of it 
window.onclick = function(event) { 

    if (!event.target.matches('.dropbtn')) { 
var dropdowns = document.getElementsByClassName("dropdown-content"); 
var i; 
for (i = 0; i < dropdowns.length; i++) { 
    var openDropdown = dropdowns[i]; 
    if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
    } 
} 

ユーザーがアイコンをタップすると、検索バーが表示されますが、私は何かを書くために検索フィールドを選択しようとするならば、それが消えます。私はチェックして、上のチュートリアルで同じ動作に気がつきました（ドロップダウンメニュー内のリンクの1つをクリックするとドロップダウンメニューが消えます）。

私はそれがイベントターゲットと関係があることを知っています。誰が私は何を変えなければならないと考えているのですか？ HTMLマークアップは同じですが、ドロップダウンメニューの代わりに検索フォームを追加しました。

ありがとうございました！

Answer 1

このコードは、dropbtnクラスを持たないすべてのdivでshowクラスを削除します。

あなたはその

if (!event.target.matches('.dropbtn') && !event.target.matches('.searchBox')) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
    var openDropdown = dropdowns[i]; 
    if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
    } 
} 

ような何かを行うと、検索ボックス要素に.searchBoxクラスを追加し、またはそれが既に持っているクラスにそれを変更することができます。

Answer 2

event.target.matchesは機能しません。これはfiddleを使用してください。それは助けてください！

JS：上記の

/* 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.className.indexOf('dropbtn') == -1) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

Answer 3

なし私のために働いていないので、私は解決策自分自身を一緒に入れてしまいました。私はjavascriptを以下のjQueryに置き換えました。

これはときに検索アイコンをユーザがクリックslideUpとslideDown切り替えることである。

$("#mobile-search-ico").click(function() { 
    $(".mobile-search-inner").slideToggle(400); 
}); 

これは、ユーザが外部検索ボックスをクリックしたときslideUpをトグルすることである。

$(document).mouseup(function (e) 
{ 
    var container = $(".mobile-search-inner"); 

    if (!container.is(e.target) // if the target of the click isn't the container... 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     container.slideUp(400); 
    } 
}); 

$("#mobile-search-ico").click(function() { 
 
    $(".mobile-search-inner").slideToggle(400); 
 
}); 
 
$(document).mouseup(function(e) { 
 
    var container = $(".mobile-search-inner"); 
 

 
    if (!container.is(e.target) // if the target of the click isn't the container... 
 
    && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
    { 
 
    container.slideUp(400); 
 
    } 
 
});

form#menu-mobile-search-main { 
 
    width: 97.6%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
input.menu-mobile-searchform-main { 
 
    border: 1px solid #000 !important; 
 
    background: #fff !important; 
 
    font-family: "classico-urw" !important; 
 
    color: #000 !important; 
 
    font-size: 13px !important; 
 
    height: 37.33px !important; 
 
    padding: 10px !important; 
 
    padding-right: 47px !important; 
 
    margin: 0 !important; 
 
} 
 
input.menu-mobile-searchform-main:focus, 
 
button.mobile-search-submit-main:focus { 
 
    outline: none !important; 
 
} 
 
button.mobile-search-submit-main { 
 
    background: #fff; 
 
    border: none; 
 
    padding: 0px; 
 
    position: absolute; 
 
    top: 15.5px; 
 
    right: 20px; 
 
} 
 
i.mobile-search-submit-icon { 
 
    font-family: 'cj-icons' !important; 
 
    font-size: 17px; 
 
    speak: none; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    font-variant: normal; 
 
    text-transform: none; 
 
    display: inline-block; 
 
    line-height: 1; 
 
    letter-spacing: 0; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
    direction: ltr; 
 
    -webkit-font-feature-settings: "liga"; 
 
    -moz-font-feature-settings: "liga=1"; 
 
    -moz-font-feature-settings: "liga"; 
 
    -ms-font-feature-settings: "liga" 1; 
 
    font-feature-settings: "liga"; 
 
    -webkit-font-variant-ligatures: discretionary-ligatures; 
 
    font-variant-ligatures: discretionary-ligatures; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    color: #000; 
 
    cursor: pointer; 
 
} 
 
.mobile-search-inner { 
 
    position: fixed; 
 
    left: 0px; 
 
    width: 100%; 
 
    top: 49px; 
 
    right: auto; 
 
    background: #fff; 
 
    height: 47.5px; 
 
    padding-top: 5.083px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="mobile-search-relative"> 
 
    <div id="mobile-search" class="mobile-search"><i id="mobile-search-ico" class="mobile-search-ico">ICON</i> 
 
    <div id="mobile-search-show" class="mobile-search-inner"> 
 
     <div class="mobile-search-hide"> 
 
     <form id="menu-mobile-search-main" role="search" method="get" action="<?php echo home_url('/'); ?>"> 
 
      <input type="text" value="" name="s" placeholder="" class="menu-mobile-searchform-main"> 
 
      <button type="submit" rel="nofollow" class="mobile-search-submit-main"><i class="fa fa-search"></i> 
 
      </button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

注：検索ボックスを切り替える検索アイコンは線形アイコンフォントを使用して作成され、検索ボタンはFontAwesomeを使用して作成されました。私はそれらをここに追加する方法がわからなかったので、私はそれらを残しました。 「アイコン」は検索アイコン（ボタンではない）を置き換えます。また、スタイリングは少し異なります。