0
このサイトのようなドロップダウンメニューを作りたいと思います。私は3つのことが起こるようにしたい。stackoverflowのように複数のドロップダウンを作成する
- クリックするとドロップダウンが表示されます。
- 一度に1つのドロップダウンのみを表示するので、別のドロップダウンリンクをクリックすると、表示されているドロップダウンが削除され、クリックしたドロップダウンが追加されます。
- 同じドロップダウンリンクをクリックしたとき、またはドロップダウンの外側をクリックしたときに表示されるドロップダウンを削除します。
私はプラグインが必要かどうか、またはあなた自身のコードを書くことでこれを作成するのが最善の方法であるかどうかはわかりません。
ここに私のコードがあり、それはうまくいきますが、唯一の問題は、同じドロップダウンリンクをクリックしたときに表示されるドロップダウンを削除しないことです。
\t $('a#menu1').click(function() {
\t $("div#1").show();
});
$('a#menu2').click(function() {
\t $("div#2").show();
});
$('a#menu3').click(function() {
\t $("div#3").show();
});
$(document).mouseup(function (e)
{
var container = new Array();
container.push($('.display_menu1'));
container.push($('.display_menu2'));
container.push($('.display_menu3'));
$.each(container, function(key, value) {
if (!$(value).is(e.target) // if the target of the click isn't the container...
&& $(value).has(e.target).length === 0) // ... nor a descendant of the container
{
$(value).hide();
}
});
});div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_menu1 {
display: none;
}
div.display_menu2 {
display: none;
}
div.display_menu3 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 200px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="body">
<ul>
<li>
<a href="#" method="POST" id='menu1' class="number">Menu 1</a>
</li>
<li>
<a href="#" method="POST" id='menu2' class="number">Menu 2</a>
</li>
<li>
<a href="#" method="POST" id='menu3' class="number">Menu 3</a>
</li>
</ul>
<div id="1" class="display display_menu1">
This is dropdown-menu 1!
</div>
<div id="2" class="display display_menu2">
This is dropdown-menu 2!
</div>
<div id="3" class="display display_menu3">
This is dropdown-menu 3!
</div>
</div>
</body>
クリック機能の内側で、divのstyle.displayプロパティを確認します。 "none"の場合はshow（）を呼び出し、それ以外の場合はhide（）を呼び出します – Lalit
$（ "div＃1"）の代わりに$（ "div＃1"）toggle（）を使用できます。 – Lalit
答えをありがとう、しかし私はまだそれを動作させるために管理していません。これはトグルを追加するときに起こったことです。 https://jsfiddle.net/4wc54rq5/ – Night83