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

看起来锚点上的onClick函数与你想象的完全不同。这就是我要做的事情：

首先，让我们摆脱其他功能，鼠标和菜单点击。你可以稍后详细说明这些问题。
对于手头的问题，您的锚点击功能，只需切换div。您可以使用 href s。

只需从 href 中删除短划线并将其发送到jQuery选择器。然后你可以切换它。为了理解，我将代码分成多行。

希望这有帮助。

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

这是pen

Answer 2

您真正想要的是，只需隐藏除选定的div之外的其他div，当您单击相应的链接并再次通过第二次单击隐藏它时。嗯，它不需要那种凌乱的JavaScript代码

＆＃13;

VoiceElementsLine

＆＃13;

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

＆＃13;

.menu{
display:none;
}

＆＃13;

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

Answer 3

解决方案找到了我。只有下面的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'); 
  }
});

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

3 个答案: