代码之家 › 专栏 › 技术社区 › Paddy Hallihan

JS-从嵌套在应该可以单击的项中的元素取消绑定单击操作

css html jquery javascript

Paddy Hallihan · 技术社区 · 6 年前

Items 在下面的代码段中,不仅仅是列表项,还有下拉列表等,。

我试着添加 $("#menu > li:nth-child(1) > ul").unbind("click"); 但这是行不通的。

$("#menu > li:nth-child(1)").on("click", function(){
  $("#menu > li:nth-child(1) > ul").unbind("click");
  if($("#menu > li:nth-child(1) > ul").css("display") == 'none'){
    $("#menu > li:nth-child(1) > ul").fadeIn("slow");
  }else{
    $("#menu > li:nth-child(1) > ul").fadeOut("slow");
  }
});

$("#menu > li:nth-child(2)").on("click", function(){
  $("#menu > li:nth-child(2) > ul").unbind("click");
  if($("#menu > li:nth-child(2) > ul").css("display") == 'none'){	
    $("#menu > li:nth-child(2) > ul").fadeIn("slow");
  }else{
    $("#menu > li:nth-child(2) > ul").fadeOut("slow");
  }
});

$("#menu > li:nth-child(3)").on("click", function(){
  $("#menu > li:nth-child(3) > ul").unbind("click");
  if($("#menu > li:nth-child(3) > ul").css("display") == 'none'){
    $("#menu > li:nth-child(3) > ul").fadeIn("slow");
  }else{
    $("#menu > li:nth-child(3) > ul").fadeOut("slow");
  }
});

ul,li{
  list-style:none;
  padding:0px;
  margin:0px;
}

#menu > li{
  display:inline-block;
  vertical-align:top;
}

#menu > li > ul{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>
  Menu 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
  Menu 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
  Menu 3
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

3 回复 | 直到 5 年前

frobinsonj 6 年前

你可以用 event.stopPropagation() .

防止当前事件在捕获和冒泡阶段进一步传播。

下面的示例显示,当您单击每个菜单项时,它不会为其父元素触发click事件。

$("#menu > li").on("click", function(e) {
  $(this).find("> ul").fadeToggle("slow");
});

$("#menu > li > ul").click(function(e) {
  e.stopPropagation();
});

ul,
li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#menu>li {
  display: inline-block;
  vertical-align: top;
}

#menu>li>ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>
    Menu 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
    Menu 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
    Menu 3
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

编辑:我稍微修改了JS,如果你想用原来的,你只需要最后3行:)

Arun Kumar 6 年前

li's 使用 e.stopPropagation(); 单击sub时停止事件冒泡 li 项目

 $("#menu li ul").click(function (e) {
            e.stopPropagation();
        })
        $("#menu li").on("click", function (e) {
          
            var ul = $(this).find("ul");
            //$("ul").unbind("click");
            if ($(ul).css("display") == 'none') {
                $(ul).fadeIn("slow");
            } else {
                $(ul).fadeOut("slow");
            }
        });

ul,li{
  list-style:none;
  padding:0px;
  margin:0px;
}

#menu > li{
  display:inline-block;
  vertical-align:top;
}

#menu > li > ul{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>
  Menu 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
  Menu 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
  Menu 3
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

SilentCoder 6 年前

您需要对DOM进行一个小的更新,它将按如下方式工作:,

$('#menu> li > span').click(function(){
  $(this).next('ul').toggle();
})


$('.child-menu > li').click(function() {
 alert($(this).html());

})

ul,li{
  list-style:none;
  padding:0px;
  margin:0px;
}

#menu > li{
  display:inline-block;
  vertical-align:top;
  cursor:pointer
}

#menu > li > ul{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>
    <span>Menu 1</span>
    <ul class="child-menu">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
   <span>Menu 2</span>
    <ul class="child-menu">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
   <span>Menu 3</span>
    <ul class="child-menu">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>