jquery - JQ data-target (a) link toggle this;防止电子

Question

您好，我有 JQuery Toggle div 功能，我已将其设置为导航面板，需要阻止用户再次单击同一链接，因为这会隐藏 div，使页面空白。我想我只是在尝试连接到选定的数据目标 (a) 链接并禁用单击操作或防止争论，仅在选定的目标上。干杯P

这是我的代码:

$('.home').css({
    display: 'visible'
});

$('.contact').css({
    display: 'none'
});

var $targets = $('.target');

$('.navBtn').click(function () {
  var $target = $($(this).data('target')).fadeToggle('slow');
  $targets.not($target).fadeOut('slow');
});

和 html:

<a class="navBtn" data-target=".home">
  <img src="img/icons/home.svg" width="100%" />
</a>
<a class="navBtn" data-target=".contact">
  <img src="assets/img/icons/message.svg" width="100%" />
</a>

Answer 1

如果您只需要元素出现而不需要切换，请使用 .fadeIn()

$('.navBtn').click(function () {
  var $target = $($(this).data('target')).fadeIn('slow');
  $targets.not($target).fadeOut('slow');
});

Fiddle