Question

我正在尝试创建侧面导航，我没有使用jQuery的经验。

我想要做的是，当悬停在任何其他li元素上而不是活跃的元素时，一个徘徊获得.active类并且初始化已经删除了该类，但是当鼠标离开该元素而没有单击它时，.active类再次出现除非被点击，否则为第一个li元素。我希望你明白这个主意。

我尝试使用.hover悬停的东西，但我不知道如何在mouseleaves时恢复到初始html，以及如何同时实现.click功能。

 class SignupForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            message:'',
            messageClass:''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    getMeteorData(){
            let data = {};
            data.currentUser = this.props.getMeteor().user();
            console.log('data',data);
            return data;
        }

    render(){
        return(
            )
    }
}
export default ReactMeteorDataWrap(SignupForm)

这是我的HTML：

$("#nav li").hover(function() {
    $("#nav li").removeClass("active");
    $(this).addClass("active");                   
    return false;
}, 
function () {
     $(this).removeClass("active");
});

Answer 1

你几乎得到了它。你不需要＆＃34;返回false;＆＃34;在第一个悬停功能。这可能会干扰执行。这仅在单击事件时需要，因为您正在中断重新加载页面的默认链接行为。

您还需要在第二个函数上再次将活动类添加到第一个列表项。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$( function() {
    $.get(
        "http://api.nal.usda.gov/ndb/reports",
        {
            "api_key": "DEMO_KEY",
            "ndbno": "01009"
        },
        function(data) {
            console.log(data);
            console.log( JSON.stringify(data, null, '    '))
        }
    );
});
</script>

Answer 2

您的代码几乎已经获得了，您可以查看以下代码段以获得完整的工作结果。

＆＃13;

$("#nav li").hover(function() 
 {
   $("#nav li").removeClass("active");
   $(this).addClass("active");                   
   return false;
 }, 
 function () 
 {
   $("#nav li").removeClass("active");
   $("#nav li:first").addClass("active");
 }
);

＆＃13;

.active
{
   background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
<ul>
    <li class="active"><a href="#slide1" title="Next Section" >About</a></li>
    <li><a href="#slide2" >Works</a></li>
    <li><a href="#slide3" >Contact</a></li>
</ul>
</nav>

＆＃13;

Answer 3

这是一个有效的JSFiddle。我需要将事件分为悬停，点击和鼠标移动，因为你想要对每个事件做的不同。我也使用变量sticky，因此它可以记住哪一个是活动元素。

https://jsfiddle.net/yvLuLwon/3

如果我误解了您的问题，请发表评论，我会解决。

Answer 4

考虑其他jquery鼠标事件： .mouseover() .mouseenter() .mouseleave() ......以及更多：https://api.jquery.com/category/events/mouse-events/

悬停并单击li元素更改类

4 个答案: