jquery、phpでshowとhid divを実行します。私はそれが尋ねられていることを知っているが、私はそれを働かせることはできません

-1

まず第一に、これは冗長な質問です。しかし、私はいくつかの問題を抱えています。jquery、phpでshowとhid divを実行します。私はそれが尋ねられていることを知っているが、私はそれを働かせることはできません

簡単に言えば、show divセクションは期待どおりに動作します。それは私が失敗することを閉じるためにdivの外側をクリックする部分です。それが失敗すると、show（）も機能しなくなります。

コードの概要を以下に示します。要素idに注目してください

<div> 
    <div id='expandmenu' ><button image to click></div> 
</div>

dropcontentクラスは基本的にdisplay：noneです。

<div id='mymenu' class='dropcontent'> 
    <a href .... >Choice 1</a> 
    <a hrfe .... >Choice 2</a> 
    . 
    . 
    . 
</div>

スクリプトファイルには次のものが含まれています。

$(document).ready(function(){ 

    $("#expandmenu").click(function(e) { 
     $('#mymenu').show(); 
    }); 

    . 
    . 
    . 

});

このコードは正常に機能し、ボタンイメージをクリックすると、メニューが期待通りに表示されます。

しかし、メニューの外側をクリックして、 "mymenu" divを閉じることができます。

私が試したほとんどのコードは、すべて失敗するため含まれていません。私の友人は私にこのコードを送信し、それがまた

$("body").not("#expandmenu").click(function() { 
    $('#mymenu').hide(); 
});

を失敗した私は、身体上のクリックがすべてに優先し、あなたがそれを開こうとする場合でも、メニューを隠すことを考えています。

シンプルな形式でご提案いただければ幸いです。私はjsのものにとても新しいです。

おかげ

出典

2017-04-14 user1970839

可能性のある重複した[私は要素の外側クリックを検出するにはどうすればよいです？]（http://stackoverflow.com/questions/152975/how-do-i-detect-a- click-outside-an-element） –

コードが機能していないことを理解するために、ドキュメントをお読みください。 '$（" body "）not（"＃expandmenu "）'は 'expandmenu'をIDとして持たない' body'要素をすべて選択します。素子。 – Xufox

document.getElementById("expandmenu").addEventListener("click", functio_test); 
 

 
function functio_test(){ 
 
var x = document.getElementById("expandmenu"); 
 
    if (x.style.display == "none") { 
 
     x.style.display = "block"; 
 
    } else { 
 
     x.style.display = "none"; 
 
    } 
 

 
} 
 
function myFunction(){ 
 
    var x = document.getElementById("expandmenu"); 
 
    if (x.style.display == "none") { 
 
     x.style.display = "block"; 
 
    } else { 
 
     x.style.display = "none"; 
 
    } 
 

 
}

#expandmenu { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
}

<div id="expandmenu" > 
 
     press me 
 
</div> 
 
<button onclick="myFunction()">Try it</button>

これは簡単で、あなたが持っている疑問を動作しますが、私は答えることを試みることを、お願いいたします。

出典

2017-04-14 04:33:05

私はあなたの要件を読み、スクリプトを作成しました。あなたのファイルにこのコードを適用してください。

<html> 
 
<head> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.expandmenu { 
 
    background-color:#ccc; 
 
    width:60px; 
 
\t height:20px; 
 
} 
 
.dropcontent { 
 
    display:none; 
 
    background-color:#ccc; 
 
    display:block; 
 
    width:300px; 
 
} 
 
</style> 
 
<script> 
 

 
$(document).click(function (e) { 
 
    if (!$(e.target).hasClass("expandmenu") 
 
     && $(e.target).parents(".dropcontent").length === 0) 
 
    { 
 
     $(".dropcontent").hide(); 
 
    } 
 
}); 
 
function displayBlock() { 
 
    document.getElementById("mymenu").style.display="block"; 
 
} 
 

 
</script> 
 
    
 
</head> 
 
<body> 
 
<div><button id='expandmenu' class="expandmenu" onclick="displayBlock()">Click</button></div> 
 
<div id='mymenu' class='dropcontent'> 
 
    <a href .... >Choice 1</a> 
 
    <a hrfe .... >Choice 2</a> 
 
    . 
 
    . 
 
    . 
 
</div> 
 

 

 
</body> 
 

 
</html>

の

出典

2017-04-14 06:24:29

ありがとうございました。それは有用であった。 – user1970839

あなたにとって有益なのであれば！あなたは答えとして受け入れることができますか？ –

jquery、phpでshowとhid divを実行します。私はそれが尋ねられていることを知っているが、私はそれを働かせることはできません

答えて

関連する問題