javascript - 如何不将类添加到特定 block ？

Question

如何不将类添加到没有脚项类的 block 中？当我单击“链接”时，仍然会添加和删除 footer 事件类，即使此 footer 菜单没有 footer 项目类，就像编写的 b 条件一样。

$(document).on('click', '.foot-title', function(e){
    if ($('.foot-menu').hasClass('foot-items')) {
      $(this).parent().toggleClass('foot-active');
    }
});

html, body {
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: #ddd;
}

.menu {
  display: none;
}

.foot-active .menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
		<div class="foot-title">
			<a href="#">More</a>
		</div>
		<div class="menu">
			<div class="menu-item">
				<a href="#">
					<span class="link">
						Lorem 1
					</span>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span class="link">
						Lorem 1
					</span>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span class="link">
						Lorem 1
					</span>
				</a>
			</div>
		</div><!-- .b-menu -->
	</div>

	<div class="foot-menu">
		<div class="foot-title">
			<a href="#">Link</a>
		</div>
	</div>

我也尝试过.each()，但没有成功。

$('.foot-title').each(function() {
    $(this).click(function() {
        $('.foot-menu').each(function(i) {
            if ($(this).hasClass('foot-items')) {
                $(this).toggleClass('foot-active');
            }
        });
    });
});

Answer 1

$(document).on('click', '.foot-items.foot-menu', function(e){
      $(this).toggleClass('foot-active');       
});

html, body {
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: #ddd;
}

.menu {
  display: none;
}

.foot-active .menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
		<div class="foot-title">
			<a href="#">More</a>
		</div>
		<div class="menu">
			<div class="menu-item">
				<a href="#">
					<span class="link">
						Lorem 1
					</span>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span class="link">
						Lorem 1
					</span>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span class="link">
						Lorem 1
					</span>
				</a>
			</div>
		</div><!-- .b-menu -->
	</div>

	<div class="foot-menu">
		<div class="foot-title">
			<a href="#">Link</a>
		</div>
	</div>

如果您的目标是仅使用 foot-items 和 foot-menu 类添加点击事件，您可以更改 .foot-items 上的点击事件.foot-menu。无需每次都触发。