jQuery : point circle set position menu hover/hover out and click navigation link

Question

Jquery:这是我编写的代码，但它并不完美，我需要在单击菜单时使事件圈保持事件链接而不返回顶部。

1. 当悬停导航链接圆点时
2. 当点击导航链接圆点保持事件链接
3. 当链接处于事件状态并且将鼠标悬停在任何其他链接后圆点出现时，圆点会转到那里并返回事件链接

如果你有建议或解决方案请给我答复

jQuery(document).ready(function() {
			
	var activelenght = jQuery(".navigation_box ul li.active a").length;
	var activelenghtfirst = jQuery(".navigation_box ul li#secmain.active a").length;
	var moveobj = jQuery(".nav_active_dot");
	var activeobj = jQuery(".navigation_box ul li.active a");
	var activeobjoff = activeobj.offset().top;
	var activeparentoff = activeobj.parent().parent().offset().top;
	var finaloffactive = activeobjoff-activeparentoff;
	if (activelenghtfirst > 0) {
		jQuery(moveobj).css("top",finaloffactive);
		jQuery(moveobj).css("opacity",1);
	} else {
		jQuery(moveobj).css("opacity",0);
	}
	jQuery(".navigation_box ul li a").each(function() {
		jQuery(this).mouseover(function () {
			var obj = jQuery(this);
			var childPos = obj.offset();
			var parentPos = obj.parent().parent().offset();
			var childOffset =  childPos.top - parentPos.top;
			jQuery(moveobj).css("opacity",1);
			jQuery(moveobj).css("top",childOffset);
		});
		jQuery(this).mouseout(function() {
			if( activelenghtfirst > 0) {
				jQuery(moveobj).css("top",0);
				jQuery(moveobj).css("opacity",0);
				console.log("2");
			} else {
				jQuery(moveobj).css("top",0);
				jQuery(moveobj).css("opacity",0);
			}
		});
		jQuery(this).click(function(e) {
			e.preventDefault();
			jQuery(this).parent().addClass("active");
			jQuery(this).parent().siblings().removeClass("active");
		});
	  });
		});

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	.navigation_box { font-family:arial; position:relative;}
	.navigation_box ul { display:block; margin:0; padding:0; position:relative;}
	.navigation_box ul li { display:block; margin:0; padding:0; position:relative;}
	.navigation_box ul li a { color:#000; margin:0; padding:7px 0 7px 30px; font-size:14px; display:inline-block; vertical-align:top; position:relative; text-decoration:none;}
	.navigation_box ul li a .circle_border { width:10px; height:10px; border-radius:50px; background:#fff; border:solid 1px #000; position:absolute; left:0; top:10px; z-index:1;}
	.navigation_box ul li.active a { color:#47c5f3;}
	.navigation_box ul li a:hover { color:#47c5f3;}
	.navigation_box ul li a:after { position:absolute; left:5px; width:1px; content:''; background:#000; height:30px; top:19px;}
	.navigation_box ul li:last-child a:after { display:none;}
	.navigation_box .nav_active_dot { position:absolute; left:0; top:0; width:10px; height:10px; background:#47c5f3; border-radius:20px; margin:10px 0 0 0; opacity:0; z-index:2;
		-webkit-transition:all ease-in-out 0.3s;
		-moz-transition:all ease-in-out 0.3s;
		transition:all ease-in-out 0.3s;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="navigation_box">
    <ul>
        <li class="active"><a href="#" id="secmain" style="opacity:0; visibility:hidden;"><span class="circle_border"></span>Who we are</a></li>
        <li><a href="#" id="secwho"><span class="circle_border"></span>Home</a></li>
        <li><a href="#" id="secbes"><span class="circle_border"></span>Solutions</a></li>
        <li><a href="#" id="secfac"><span class="circle_border"></span>Factor</a></li>
        <li><a href="#" id="sectra"><span class="circle_border"></span>Stories</a></li>
        <li><a href="#" id="secfor"><span class="circle_border"></span>Services</a></li>
        <li><a href="#" id="secnew"><span class="circle_border"></span>News</a></li>
    </ul>
    <div class="nav_active_dot"></div>
</div>

Answer 1

您可以使用以下方法使您主动子弹变蓝:

.navigation_box ul li.active a .circle_border {
  background: #47c5f3;
  border: 1px solid #47c5f3;
}

请看下面的演示:

jQuery(document).ready(function() {

  var activelenght = jQuery(".navigation_box ul li.active a").length;
  var activelenghtfirst = jQuery(".navigation_box ul li#secmain.active a").length;
  var moveobj = jQuery(".nav_active_dot");
  var activeobj = jQuery(".navigation_box ul li.active a");
  var activeobjoff = activeobj.offset().top;
  var activeparentoff = activeobj.parent().parent().offset().top;
  var finaloffactive = activeobjoff - activeparentoff;
  if (activelenghtfirst > 0) {
    jQuery(moveobj).css("top", finaloffactive);
    jQuery(moveobj).css("opacity", 1);
  } else {
    jQuery(moveobj).css("opacity", 0);
  }
  jQuery(".navigation_box ul li a").each(function() {
    jQuery(this).mouseover(function() {
      var obj = jQuery(this);
      var childPos = obj.offset();
      var parentPos = obj.parent().parent().offset();
      var childOffset = childPos.top - parentPos.top;
      jQuery(moveobj).css("opacity", 1);
      jQuery(moveobj).css("top", childOffset);
    });
    jQuery(this).mouseout(function() {
      if (activelenghtfirst > 0) {
        jQuery(moveobj).css("top", 0);
        jQuery(moveobj).css("opacity", 0);
        console.log("2");
      } else {
        jQuery(moveobj).css("top", 0);
        jQuery(moveobj).css("opacity", 0);
      }
    });
    jQuery(this).click(function(e) {
      e.preventDefault();
      jQuery(this).parent().addClass("active");
      jQuery(this).parent().siblings().removeClass("active");
    });
  });
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navigation_box {
  font-family: arial;
  position: relative;
}

.navigation_box ul {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.navigation_box ul li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.navigation_box ul li a {
  color: #000;
  margin: 0;
  padding: 7px 0 7px 30px;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  text-decoration: none;
}

.navigation_box ul li a .circle_border {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: #fff;
  border: solid 1px #000;
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 1;
}

.navigation_box ul li.active a {
  color: #47c5f3;
}

.navigation_box ul li.active a .circle_border { /* added */
  background: #47c5f3;
  border: 1px solid #47c5f3;
}

.navigation_box ul li a:hover {
  color: #47c5f3;
}

.navigation_box ul li a:after {
  position: absolute;
  left: 5px;
  width: 1px;
  content: '';
  background: #000;
  height: 30px;
  top: 19px;
}

.navigation_box ul li:last-child a:after {
  display: none;
}

.navigation_box .nav_active_dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background: #47c5f3;
  border-radius: 20px;
  margin: 10px 0 0 0;
  opacity: 0;
  z-index: 2;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation_box">
  <ul>
    <li class="active"><a href="#" id="secmain" style="opacity:0; visibility:hidden;"><span class="circle_border"></span>Who we are</a></li>
    <li><a href="#" id="secwho"><span class="circle_border"></span>Home</a></li>
    <li><a href="#" id="secbes"><span class="circle_border"></span>Solutions</a></li>
    <li><a href="#" id="secfac"><span class="circle_border"></span>Factor</a></li>
    <li><a href="#" id="sectra"><span class="circle_border"></span>Stories</a></li>
    <li><a href="#" id="secfor"><span class="circle_border"></span>Services</a></li>
    <li><a href="#" id="secnew"><span class="circle_border"></span>News</a></li>
  </ul>
  <div class="nav_active_dot"></div>
</div>

但是你已经说过了:

When link is active and circle dot there after hover any another link the circle dot goes to there and go back to active link

在这种情况下，您可以使用变量(例如下面演示中的 homePos)来设置默认位置。您可以在 mouseout 上返回此默认位置，然后在事件链接 上设置 - 见下文:

jQuery(document).ready(function() {

  var homePos = 0;
  var activelenght = jQuery(".navigation_box ul li.active a").length;
  var activelenghtfirst = jQuery(".navigation_box ul li#secmain.active a").length;
  var moveobj = jQuery(".nav_active_dot");
  var activeobj = jQuery(".navigation_box ul li.active a");
  var activeobjoff = activeobj.offset().top;
  var activeparentoff = activeobj.parent().parent().offset().top;
  var finaloffactive = activeobjoff - activeparentoff;
  if (activelenghtfirst > 0) {
    jQuery(moveobj).css("top", finaloffactive);
    jQuery(moveobj).css("opacity", 1);
  } else {
    jQuery(moveobj).css("opacity", 0);
  }
  jQuery(".navigation_box ul li a").each(function() {
    jQuery(this).mouseover(function() {
      var obj = jQuery(this);
      var childPos = obj.offset();
      var parentPos = obj.parent().parent().offset();
      var childOffset = childPos.top - parentPos.top;
      jQuery(moveobj).css("opacity", 1);
      jQuery(moveobj).css("top", childOffset);
    });
    jQuery(this).mouseout(function() {
        jQuery(moveobj).css("top", homePos); /* changed */
        jQuery(moveobj).css("opacity", homePos); /* changed */
    });
    jQuery(this).click(function(e) {
      e.preventDefault();
      jQuery(this).parent().addClass("active");
      jQuery(this).parent().siblings().removeClass("active");
      
      /* added below */
      var obj = jQuery(this);
      var childPos = obj.offset();
      var parentPos = obj.parent().parent().offset();
      homePos = childPos.top - parentPos.top;
    });
  });
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navigation_box {
  font-family: arial;
  position: relative;
}

.navigation_box ul {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.navigation_box ul li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.navigation_box ul li a {
  color: #000;
  margin: 0;
  padding: 7px 0 7px 30px;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  text-decoration: none;
}

.navigation_box ul li a .circle_border {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: #fff;
  border: solid 1px #000;
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 1;
}

.navigation_box ul li.active a {
  color: #47c5f3;
}

.navigation_box ul li a:hover {
  color: #47c5f3;
}

.navigation_box ul li a:after {
  position: absolute;
  left: 5px;
  width: 1px;
  content: '';
  background: #000;
  height: 30px;
  top: 19px;
}

.navigation_box ul li:last-child a:after {
  display: none;
}

.navigation_box .nav_active_dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background: #47c5f3;
  border-radius: 20px;
  margin: 10px 0 0 0;
  opacity: 0;
  z-index: 2;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation_box">
  <ul>
    <li class="active"><a href="#" id="secmain" style="opacity:0; visibility:hidden;"><span class="circle_border"></span>Who we are</a></li>
    <li><a href="#" id="secwho"><span class="circle_border"></span>Home</a></li>
    <li><a href="#" id="secbes"><span class="circle_border"></span>Solutions</a></li>
    <li><a href="#" id="secfac"><span class="circle_border"></span>Factor</a></li>
    <li><a href="#" id="sectra"><span class="circle_border"></span>Stories</a></li>
    <li><a href="#" id="secfor"><span class="circle_border"></span>Services</a></li>
    <li><a href="#" id="secnew"><span class="circle_border"></span>News</a></li>
  </ul>
  <div class="nav_active_dot"></div>
</div>