Question

我有一个菜单，用户点击链接和列表通过.addClass( "show-nav" )显示。

以下是带有JS代码的jsFiddle：

jQuery(".nav-js-trigger").each(function(){
    this.onclick = function() {

        var hasClass;
        hasClass = jQuery(this).next().hasClass( "show-nav" );

        jQuery('.show-nav').removeClass('show-nav');

        if (hasClass === false) {
            jQuery(this).next().addClass( "show-nav" );
        }

    }
});

如果用户使用类show-nav单击div的外部，我想删除该课程show-nav。 我该怎么做？

我见过e.target div ID但不是类的示例，特别是不是这样的场景。

Answer 1

您可以向元素添加一个侦听器，其上有一个event.stopPropagation()，另一个侦听器可以添加一个侦听器，以便在以前没有拦截此事件时捕获此事件。

这样的事情：

$(".show-nav").on("click", function(event){
    event.stopPropagation();
});

$("body").on("click", function(event){
    $(".show-nav").hide(); // or something...
});

为了简化您的用例，这里有一个JSFiddle。

＆＃13;

$(".trigger").on("click", function(event)
{
    $(".menu").toggle();
    event.stopPropagation();
});

$(".menu").on("click", function(event)
{
    event.stopPropagation();
});

$(document).on("click", function(event)
{
    $(".menu").hide();
});

＆＃13;

.menu
{
    display: none;
    background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="trigger">menu</a>
<div class="menu">Hello</div>

＆＃13;

Answer 2

// Expected format of the node (there are no required fields)
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

如果在div之外单击删除类（目标类）

2 个答案: