隐藏菜单上的内容链接二次点击

Hide content on menu link secondary click

本文关键字：二次 链接 隐藏菜单      更新时间：2023-09-26

这里是一些代码和一个问题:如何启用切换效果后再次点击菜单链接按钮保存现有的功能?所以我需要在第二次点击隐藏内容(二级点击链接一个隐藏内容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>

你真正想要的是，只是隐藏其他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>

。我想这一定完全解决了你的问题。

似乎你的onClick功能锚不完全工作，因为你的想法。下面是我要做的:

  1. 首先，让我们摆脱其他功能，鼠标右键和菜单点击。你可以以后再详细说明。
  2. 对于手头的问题，你的锚点点击功能，只需切换div。您可以使用hrefs来选择要显示/隐藏的div。

只需从href中删除破折号并将其发送给jQuery选择器。然后你可以切换它。为了便于理解，我将代码分成多行。

希望对你有帮助。

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

这是笔

解决方案找到我了。只有以下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'); 
  }
});
相关文章：