javascript - 单击特定子元素时运行动画，但对所有其他子元素不执行任何操作

Question

我正在尝试让以下代码片段按照我想要的方式工作。我只希望当选择“back”类的“li”元素时，子菜单滑回右侧。现在，当单击任何元素时，子菜单会滑回右侧。我尝试了以下代码，但无济于事，但相信它是在正确的轨道上:

$(function() {
 $('.section').click( function() {
 $(this).find('ul').animate( {
    left: "0"
 }, 1000 );
 }).children().click( function() {

var selected = this;
console.debug(selected);

if ($(this).hasClass("back")) {
    $('.sub-menu').animate( {
        left: "485"
    }, 1000 );
}
else {
    return false;
   }
 });
});

我相信它不会识别具有“back”类的嵌套 LI 元素与原始“子菜单”ul 有何不同。我也尝试过

.children(":not(.back)").click( function() {
    return false;
}

这不起作用。

$(function() {
  $('.section').click( function() {
    $(this).find('ul').animate( {
    	left: "0"
    }, 1000 );
  }).children().click( function() {
	$('.sub-menu').animate( {
    	left: "485"
    }, 1000 );

    return false;

  });
});

ul {
	margin: 0;
	padding:0;
	list-style-type: none;
}

li {
	background-color: green;
	color: white;
	border-bottom: 1px solid #fff;
	width: 100%;
	height: 20px;
	font-size: 16px;
	text-align: center;
}

a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
}
.container {
	margin: auto;
	max-width:480px;
	width: 480px;
	height: 736px;
	border: 1px solid black;
	overflow-x: visible;
	position: relative;
}

.menu {
	position: relative;
	z-index: 1;
}
.main-menu {
	position: relative;
}
.sub-menu {
	position: absolute;
	z-index:2;
	width: 100%;
	display: inline;
	left: 485px;
	top: 0;
}
.sub-menu li {
	background-color: blue !important;
}
.hidden {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
	<div class="menu">
		<ul class="main-menu">
			<li class="section">
				Section 1
				<ul class="sub-menu" style="z-index: 3;">
					<li>
						<a href="#section1a">Section 1A</a>
					</li>
					<li>
						<a href="#section1b">Section 1B</a>
					</li>
					<li>
						<a href="#section1c">Section 1C</a>
					</li>
					<li class="back">
						Back
					</li>
				</ul>
			</li>
			<li class="section">
				Section 2
				<ul class="sub-menu" style="z-index: 2;">
					<li>
						Section 2A
					</li>
					<li>
						Section 2B
					</li>
					<li>
						Section 2C
					</li>
					<li class="back">
						Back
					</li>
				</ul>
			</li>
         </ul>
       </div>
   </div>

Answer 1

您可以将 .children().click(....) 更改为 .find(".back").click(....) 因为children() 将选择 ul 元素，而不是 li 元素。

这应该有效。

$(function() {
 $('.section').click( function() {
     $(this).find('ul').animate( {
        left: "0"
     }, 1000 );
  }).find(".back").click( function() {
    $(this).parent().animate( {
        left: "485"
    }, 1000 );
 });
});