jquery相同class 当前事件各自发生

多个相同class的元素，（点击）操作后，当前事件单独发生

• 子元素发生事件 $(this).children()

  <li class="dropdown">
  	<a>导航<span class="caret"></span></a>
  	<ul class="dropdown-menu">
  		<li><a href="">二级</a></li>
  	</ul>
  </li>
  <li class="dropdown">
  	<a>导航<span class="caret"></span></a>
  	<ul class="dropdown-menu">
  		<li><a href="">二级</a></li>
  	</ul>
  </li>
  //鼠标悬浮二级导航出现
  <script>
  	$(".dropdown").on("mouseover", function() {
          $(this).children('.dropdown-menu').show();
      });
      $(".dropdown").on("mouseout", function() {
          $(this).children('.dropdown-menu').hide();
      });
  </script>
  

• 同级元素发生事件 $(this).siblings()

  <li class="dropdown">
  	<a>导航</a>
  	<span class="caret"></span>
  	<ul class="dropdown-menu">
  		<li><a href="">二级</a></li>
  	</ul>
  </li>
  <li class="dropdown">
  	<a>导航</a>
  	<span class="caret"></span>
  	<ul class="dropdown-menu">
  		<li><a href="">二级</a></li>
  	</ul>
  </li>
  //点击icon二级导航出现
  <script>
  	$(".caret").click(function () {
  		$(this).siblings(".dropdown_menu").toggle();
  	});
  </script>		
  

• 父级元素发生事件 $(this).parent()

  <li class="dropdown">
  	<a>导航</a>
  	<span class="caret"></span>
  	<ul class="dropdown-menu">
  		<li><a href="">二级</a></li>
  	</ul>
  </li>
  <li class="dropdown">
  	<a>导航</a>
  	<span class="caret"></span>
  	<ul class="dropdown-menu">
  		<li><a href="">二级</a></li>
  	</ul>
  </li>
  //点击icon删除导航
  <script>
  	$(".caret").click(function () {
  		$(this).parent().remove();
  	});
  </script>