带下拉菜单
问题描述：
我需要这个菜单有多个菜单例如：“Item 2”。带下拉菜单
“项目2”打开后，“项目1”关闭。
所有其他应该工作，因为它现在工作。
箭头旋转
菜单保持打开状态，如果用户点击网站或子菜单
等
HTML：
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-
awesome/4.3.0/css/font-awesome.min.css">
<div id="container">
Item 1<i id="icon" class="fa fa-arrow-down"></i>
</div>
<ul id="test" class="hide">
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
CSS：
.fa-arrow-down{
transform: rotate(-90deg);
transition: transform 1s linear;
}
.fa-arrow-down.open{
transform: rotate(0deg);
transition: transform 1s linear;
}
.hide {
display:none;
}
.show {
display: inline;
}
个JS：
(function(document) {
var div = document.getElementById('container');
var icon = document.getElementById('icon');
var test = document.getElementById('test');
var open = false;
div.addEventListener('click', function() {
if (open) {
icon.className = 'fa fa-arrow-down';
test.className = 'hide';
} else {
icon.className = 'fa fa-arrow-down open';
test.className = 'show';
}
open = !open;
});
})(document);
答
请找到以下工作溶液JS斌链接
https://jsbin.com/jedulux/1/edit?html,css,js,output
我已经加入JQuery的处理切换
$('#container').on('click', 'ul li', function() {
$(this).find('ul').toggle()
$(this).find('i').toggleClass('open')
});
修改HTML
<div id="container" style="display:inline-block">
<ul id="items">
<li>
Item 1 <i id="icon" class="fa fa-arrow-down"></i>
<ul style="display:none">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>
Item 2 <i id="icon" class="fa fa-arrow-down"></i>
<ul style="display:none">
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
</div>
修改CSS
.fa-arrow-down{
transform: rotate(-90deg);
transition: transform 1s linear;
}
.fa-arrow-down.open{
transform: rotate(0deg);
transition: transform 1s linear;
}
.hide {
display:none;
}
.show {
display: block;
}
ul {
list-style-type: none;
padding: 0;
}
ul#items > li {
float: left
}
ul#items > li > ul {
position: absolute;
}
请注意，造型可能不是你所期待的，但我想你可以风格它根据自己的需要。
编辑：
JS斌：https://jsbin.com/jedulux/edit?html,css,output
的JavaScript：
$('#container').on('click', 'ul li', function() {
var self = this;
$('#container > ul > li').each(function(index, item) {
if (item == self) {
$(item).find('ul').toggle()
$(this).find('i').toggleClass('open')
} else {
$(item).find('ul').hide()
$(this).find('i').removeClass('open')
}
})
});
+0
谢谢，菜单虽然不会关闭，一旦其他点击。 如果您打开“项目1”，然后打开“项目2”，“项目1”仍将打开。 此外，菜单在点击子菜单时关闭。 –
+0
请参阅底部的编辑答案。 –
答
也许这将解决您的问题：
HTML
<div id="container">
Item 1<i id="icon" class="fa fa-arrow-down"></i>
</div>
<ul id="test" class="hide">
<li>
<div id="containers1">
Item 1-1<i id="icons1" class="fa fa-arrow-down"></i>
</div>
<ul id="tests1" class="hide">
<li>Item 1-1-1</li>
<li>Item 1-1-2</li>
</ul>
</li>
<li>
<div id="containers2">
Item 1-2<i id="icons2" class="fa fa-arrow-down"></i>
</div>
<ul id="tests2" class="hide">
<li>Item 1-1-1</li>
<li>Item 1-2-2</li>
</ul>
</li>
</ul>
你当然可以使用classes并使用parent element和child element选择器来进一步简化它（我没有足够的时间。）
CSS
.fa-arrow-down{
transform: rotate(-90deg);
transition: transform 1s linear;
}
.fa-arrow-down.open{
transform: rotate(0deg);
transition: transform 1s linear;
}
.hide {
display:none;
}
.show {
display: inline;
}
的JavaScript（无jQuery的）
(function(document){
var div = document.getElementById('container');
var icon = document.getElementById('icon');
var test = document.getElementById('test');
var open = false;
div.addEventListener('click', function(){
if(open){
icon.className = 'fa fa-arrow-down';
test.className = 'hide';
}
else{
icon.className = 'fa fa-arrow-down open';
test.className = 'show';
}
open = !open;
});
var divs1 = document.getElementById('containers1');
var icons1 = document.getElementById('icons1');
var tests1 = document.getElementById('tests1');
var opens1 = false;
divs1.addEventListener('click', function(){
if(opens1){
icons1.className = 'fa fa-arrow-down';
tests1.className = 'hide';
}
else{
icons1.className = 'fa fa-arrow-down open';
tests1.className = 'show';
}
opens1 = !opens1;
});
var divs2 = document.getElementById('containers2');
var icons2 = document.getElementById('icons2');
var tests2 = document.getElementById('tests2');
var opens2 = false;
divs2.addEventListener('click', function(){
if(opens2){
icons2.className = 'fa fa-arrow-down';
tests2.className = 'hide';
}
else{
icons2.className = 'fa fa-arrow-down open';
tests2.className = 'show';
}
opens2 = !opens2;
});
})(document);
这里是使用类等，会帮助（比如我做了3个独立的功能，但是，使用类将缩短到1）。
包含此
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
答
没有jQuery的，但我已经写我自己的逻辑，而不是你的;
加载font-awesome.css时出现一些问题;逻辑明智的代码是坚实的;
注意：您可能无法感受到代码段中的箭头运动;复制到html并看到它的工作。
希望没关系。
var icon = document.getElementById('icon');
var icon1 = document.getElementById('icon1');
var test = document.getElementById('test');
var test1 = document.getElementById('test1');
var secondMenuOpen = false;
var firstMenuOpen = false;
icon.onclick = function() {
if(!firstMenuOpen) openFirstMenu();
else closeFirstMenu();
}
icon1.onclick = function() {
if(!secondMenuOpen) openSecondMenu();
else closeSecondMenu();
checkFirstMenu();
}
function checkFirstMenu() {
if(firstMenuOpen) closeFirstMenu();
}
function closeFirstMenu() {
icon.classList.remove('open');
test.classList.add('hide');
firstMenuOpen = false;
}
function openFirstMenu() {
icon.classList.add('open');
test.classList.remove('hide');
firstMenuOpen = true;
}
function closeSecondMenu() {
icon1.classList.remove('open');
test1.classList.add('hide');
secondMenuOpen = false;
}
function openSecondMenu() {
icon1.classList.add('open');
test1.classList.remove('hide');
secondMenuOpen = true;
}.fa-arrow-down{
transform: rotate(-90deg);
transition: transform 1s linear;
}
.fa-arrow-down.open{
transform: rotate(0deg);
transition: transform 1s linear;
}
.hide {
display:none;
}
.show {
display: inline;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="container">
Item 1<i id="icon" class="fa fa-arrow-down"></i>
</div>
<ul id="test" class="hide">
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
<div id="container1">
Item 2<i id="icon1" class="fa fa-arrow-down"></i>
</div>
<ul id="test1" class="hide">
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
是在使用jQuery的允许？ –
是的，会有也没有问题 –