下面是一些代碼和一個問題:如何啓用切換效果後,再次點擊菜單鏈接按鈕與保存現有功能?所以我需要在第二次點擊時隱藏內容(次級點擊鏈接之一隱藏內容1等)所有其他人員工作完美,但我有一些在我的jQuery中損壞。另外,也許我在這裏有太多無用的代碼行。如果可以,請糾正我。隱藏內容在菜單鏈接輔助點擊
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function() {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
this.parent.siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
$(document).mouseup(function (e) {
// if the target of the click isn't the menu nor a decendant of the menu
if (!menu.is(e.target) && menu.has(e.target).length === 0) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
// hide menu when clicking on links
$('.menu a').click(function() {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
.is-hidden {
display: none;
}
.is-visible {
display: block;
}
.active {
background: green;
}
.main_nav {
padding: 0;
}
.main_nav li {
display: inline-block;
position: relative;
width: 180px;
background: grey;
text-align: center;
}
.main_nav li a {
display: block;
padding: 30px 0 1px;
cursor: pointer;
text-decoration: none;
}
.menu {
background: grey;
width: 1000px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li><a href="#link_1">Link 1</a></li>
<li><a href="#link_2">Link 2</a></li>
<li><a href="#link_3">Link 3</a></li>
<li><a href="#link_4">Link 4</a></li>
<li><a href="#link_5">Link 5</a></li>
<li><a href="#link_6">Link 6</a></li>
</ul>
<!-- Div's -->
<div class="menu is-hidden" id="link_1">
<a href="#">Content 1</a>
</div>
<div class="menu is-hidden" id="link_2">
<a href="#">Content 2</a>
</div>
<div class="menu is-hidden" id="link_3">
<a href="#">Content 3</a>
</div>
<div class="menu is-hidden" id="link_4">
<a href="#">Content 4</a>
</div>
<div class="menu is-hidden" id="link_5">
<a href="#">Content 5</a>
</div>
<div class="menu is-hidden" id="link_6">
<a href="#">Content 6</a>
</div>
Here是包含用於該實施例中的代碼一支筆。
非常感謝編輯,德魯! – k1r8r0wn