Question

我的代码工作正常，但需求的变化。

我需要保持当前active class处于活动状态，再次移除鼠标悬停在活动<li>

我对JQuery不擅长，所以有人可以帮忙吗？

(function($){
	$(document).ready(function(){
		$('a.form').on('mouseover', function(event) {
			event.preventDefault(); 
			event.stopPropagation(); 
			$(this).parent().siblings().removeClass('active');
			$(this).parent().toggleClass('active');
		});
	});
})(jQuery);

li.active .btncss, .btncss:hover {
    color: #FFAE00;
    background: #ffffff;
    border: 2px solid;
    text-decoration: none;
}
li{display:inline}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="active"><a href="#within" id="within" class="btncss form">With In City</a></li>
<li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a></li>
<li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a></li>
<li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a></li>
</ul>

Answer 1

使用addClass代替toggleClass。

.toggleClass根据类的存在或状态参数的值，在匹配元素集中的每个元素中添加或删除一个或多个类。

.addClass()将指定的类添加到匹配元素集中的每个元素。

请注意，此方法不会替换类，这一点非常重要。它只是添加了类，将其附加到可能已经分配给元素的任何类中。

试试这个：

＆＃13;

(function($) {
  $(document).ready(function() {
    $('a.form').on('mouseover', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().siblings().removeClass('active');
      $(this).parent().addClass('active');
    });
  });
})(jQuery);

＆＃13;

li.active .btncss,
.btncss:hover {
  color: #FFAE00;
  background: #ffffff;
  border: 2px solid;
  text-decoration: none;
}
li {
  display: inline
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
  <li class="active"><a href="#within" id="within" class="btncss form">With In City</a>
  </li>
  <li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a>
  </li>
  <li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a>
  </li>
  <li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a>
  </li>
</ul>

＆＃13;

Answer 2

有点难以理解您的问题 - 您希望最初有效的<li>在mouseout上重置为有效吗？为此，您需要记录最初处于活动状态的内容并添加mouseout处理程序：

(function($){
	$(document).ready(function(){
        var originally_active = $('li.active');
		$('a.form').on('mouseover', function(event) {
			event.preventDefault(); 
			event.stopPropagation(); 
			$(this).parent().siblings().removeClass('active');
			$(this).parent().toggleClass('active');
		});
        $('a.form').on('mouseout', function() {
            $(this).parent().removeClass('active');
            originally_active.toggleClass('active');
        });
	});
})(jQuery);

li.active .btncss, .btncss:hover {
    color: #FFAE00;
    background: #ffffff;
    border: 2px solid;
    text-decoration: none;
}
li{display:inline}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="active"><a href="#within" id="within" class="btncss form">With In City</a></li>
<li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a></li>
<li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a></li>
<li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a></li>
</ul>

鼠标悬停事件有点麻烦

2 个答案: