Question

我为一个简单的下拉菜单编写了一些javascript。但是在我的下拉链接中，我使用主题标签作为href属性（<a href="#"）的占位符，当它们被点击时，页面会滚动回到顶部。

我想用jquery的.preventDefault();来防止这种情况，但我不知道我的脚本在哪里以及如何实现它。

示例：http://codepen.io/anon/pen/rwdoa（由于iframe codepen不幸使用，它不会将主题标签添加到网址中）

// *************************************
//
//   Navigation dropdown
//   -> Expand/collapse submenus
//
// *************************************

// -------------------------------------
// Toggle .is-hidden class onclick and 
// allow only one open menu at a time
// -------------------------------------

$(document).ready(function() {
    $('.Navigation-listItem').click(function(e) {
      if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
        $(".Navigation-list--dropdown").addClass('is-hidden');
        $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
      } else {
        $(".Navigation-list--dropdown").addClass('is-hidden');         
      }          
    });
  $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
    e.stopPropagation();
  });
});

// -------------------------------------
// Anything that gets to the document
// will hide the dropdown
// -------------------------------------

$(document).click(function(){
  $(".Navigation-list--dropdown").addClass('is-hidden');
});

// -------------------------------------
// Clicks within the dropdown won't make
// it past the dropdown itself
// -------------------------------------

$(".Navigation-listItem--hasDropdown").click(function(e){
  e.stopPropagation();
});

Answer 1

取决于，但一种方式是这样的

$('.Navigation-listItem').click(function(e) {
  if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
    $(".Navigation-list--dropdown").addClass('is-hidden');
    $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
  } else {
    $(".Navigation-list--dropdown").addClass('is-hidden');         
  }          
}).children('a.Navigation-link--dropdownTrigger').click(function(e){e.preventDefault();}); // add this line

demo

Answer 2

您应该在处理程序中传递事件：

$(document).click(function(e){
  e.preventDefault();
  $(".Navigation-list--dropdown").addClass('is-hidden');
});

Answer 3

我不确定我是否正确，但我认为这很简单，只需将e.preventDefault添加到第一次点击方法。

$(document).ready(function() {
    $('.Navigation-listItem').click(function(e) {
      e.preventDefault();
      if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
        $(".Navigation-list--dropdown").addClass('is-hidden');
        $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
      } else {
        $(".Navigation-list--dropdown").addClass('is-hidden');         
      }          
    });
  $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
    e.stopPropagation();
  });
});

Answer 4

试试这个

    $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
        e.preventDefault();
    });

如何在我的下拉脚本中使用preventDefault？

4 个答案: