如何才能将类添加到特定块？

Question

如何不将类添加到没有脚类项的块中？当我点击＆＃34; Link＆＃34;时，仍会添加和删除脚活动类，即使这个脚菜单没有一类脚料，就像写了b条件一样。

＆＃13;

＆＃13;

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

＆＃13;

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

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

.menu {
  display: none;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我也尝试过.each（），但它没有用完。

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

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

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

.menu {
  display: none;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

检查班级foot-items时，您需要根据点击的元素进行操作，这样您就需要这样做：

$(this).parent()

希望这会有所帮助：）

$(document).on('click', '.foot-title', function(e){
    if ($(this).parent().hasClass('foot-items')) {
      $(this).parent().toggleClass('foot-active');
      console.log(".foot-active added or removed");
    }
});

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>