隱藏內容在菜單鏈接輔助點擊

Question

下面是一些代碼和一個問題：如何啓用切換效果後，再次點擊菜單鏈接按鈕與保存現有功能？所以我需要在第二次點擊時隱藏內容（次級點擊鏈接之一隱藏內容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是包含用於該實施例中的代碼一支筆。

Answer 1

該解決方案找到我。只有JS如下：

// 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'); 
    menu.removeClass('is-visible').addClass('is-hidden'); 
    anchor.not(this).removeClass('active'); 
    $(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible'); 
    } 
    return false; 
}); 

// close menu when clicking on links or button inside of it 
$('.menu a, .menu button').click(function() { 
    anchor.removeClass('active'); 
    menu.removeClass('is-visible').addClass('is-hidden'); 
}); 

// close menu when clicking inside of it 
$('body').click(function(e) { 
    var el = e.target || e.srcElement; 
    // if the target of the click isn't the other menu nor navigation link 
    if (!$(el).closest('.menu').length && !$(el).closest('.main_nav li a').length) { 
    anchor.removeClass('active'); 
    menu.removeClass('is-visible').addClass('is-hidden'); 
    } 
}); 

Answer 2

看起來你的錨點上的onClick函數並不像你想象的那樣工作。以下是我要做的事情：

1. 首先，讓我們擺脫其他功能，mouseup和菜單單擊。您可以稍後詳細闡述這些問題。
2. 對於手頭的問題，您的錨定點擊功能，只需切換div。您可以使用href s來選擇顯示/隱藏哪個div。

只是刪除從HREF的儀表板和發送到jQuery選擇。然後你可以切換它。爲了理解，我將代碼分成多行。

希望這會有所幫助。

anchor.click(function() { 
    var href = $(this).attr("href").replace('#', ''); 
    var div = $('#' + href); 
    $('div.menu').not(div).hide(); 
    $(div).toggle(); 
}); 

這裏有一個pen

Answer 3

你真正想要的是什麼，只是隱藏除選定一個其他的div，當您單擊相應的鏈接，並再次與第二點擊隱藏它。 那麼它不需要那種凌亂的JavaScript代碼

$(function(){ 
 
     $('.clicker').click(function(e){  
 
       $('.menu').hide(); 
 
       $('#link_'+$(this).attr('target')).toggle(); 
 
     }); 
 
});

.menu{ 
 
display:none; 
 
}

<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="#" target="1" class="clicker">Link 1</a></li> 
 
    <li><a href="#" target="2" class="clicker">Link 2</a></li> 
 
    <li><a href="#" target="3" class="clicker">Link 3</a></li> 
 
    <li><a href="#" target="4" class="clicker">Link 4</a></li> 
 
    <li><a href="#" target="5" class="clicker">Link 5</a></li> 
 
    <li><a href="#" target="6" class="clicker">Link 6</a></li> 
 
</ul> 
 

 
<!-- Div's --> 
 
<div class="menu" id="link_1"> 
 
    <a href="#">Content 1</a> 
 
</div> 
 
<div class="menu" id="link_2"> 
 
    <a href="#">Content 2</a> 
 
</div> 
 
<div class="menu" id="link_3"> 
 
    <a href="#">Content 3</a> 
 
</div> 
 
<div class="menu" id="link_4"> 
 
    <a href="#">Content 4</a> 
 
</div> 
 
<div class="menu" id="link_5"> 
 
    <a href="#">Content 5</a> 
 
</div> 
 
<div class="menu" id="link_6"> 
 
    <a href="#">Content 6</a> 
 
</div>

。 我認爲這必須是針對您的問題的完整解決方案。