隐藏内容在菜单链接辅助点击

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>

。 我认为这必须是针对您的问题的完整解决方案。