Question

我有一个产品的功能列表。我想做以下事情：

悬停时，slideToggle
如果用户点击悬停时的元素，请保持打开状态，直到用户将鼠标悬停在其他项目上或点击其他项目

这可能吗？到目前为止，我已经打开/关闭点击工作，但是当我尝试添加悬停状态时，它都会出错。这是一个基本设置的jsFiddle： jsFiddle Link

HTML：

<p id="deadline-management" style="text-align: center;">Deadline Management »</p>
<p id="workflow-management" style="text-align: center;">Workflow Management »</p>
<div id="deadline-management-full" class="full-text">
     <h3 style="text-align: center;">DEADLINE MANAGEMENT</h3>

    <p class="p1">We know what deadlines mean and we know how bad life is when you miss one.</p>
    <div id="workflow-management-full" class="full-text">
         <h3 style="text-align: center;">WORKFLOW MANAGEMENT</h3>

        <p class="p1">We live in a world where there is always more to do than time to do it. Some things can wait, others can wait longer.</p>
    </div>

CSS：

.full-text {
    display: none;
}

jQuery的：

$("#deadline-management").click(function () {
    $("#deadline-management-full").slideToggle();
})
$("#workflow-management").click(function () {
    $("#workflow-management-full").slideToggle();
})

提前致谢！

Answer 1

jQuery有一个

.hover()

功能;那是你在寻找什么？

新JSFiddle：http://jsfiddle.net/M5pes/3/

如果您希望在单击和悬停时确实具有特定行为，则可以使用布尔变量来确定在哪个时间触发了哪些事件。小例子：

http://jsfiddle.net/M5pes/4/

截止日期管理内容如果已经点击则不会在悬停时滑动。

Answer 2

我希望 this JSFIddle 能够回答您的问题。

代码有点复杂，可能需要一些重构。

这是JS：

var hasClicked1
var hasClicked2

$("#deadline-management").hover(function () {
    hasClicked1 = false;
    $("#deadline-management-full").slideDown();
},

function () {

if (hasClicked1 || hasClicked2) {


} else {
           $("#deadline-management-full").slideUp('fast')          
           $("#workflow-management-full").slideUp('fast')  
}
});


$("#workflow-management").hover(function () {
    hasClicked2 = false;
    if( !hasClicked1) {
    $("#workflow-management-full").slideDown();
    }
}, function () {
    if (hasClicked2 || hasClicked1) {

    } else {
           $("#deadline-management-full").slideUp('fast')          
           $("#workflow-management-full").slideUp('fast')  
    }
})

$("#deadline-management").click(function () {
    hasClicked1 = true;
});


$("#workflow-management").click(function () {
    hasClicked2 = true;

});

如果它回答了您的问题，请将问题标记为已回答并询问我是否需要了解具体内容。祝你好运！

Answer 3

我认为您的想法不是非常用户友好！我改变了它！

CSS：

*{
        font-family:"Trebuchet MS", Helvetica, sans-serif;
        text-align:center;
}
#head{
    background:#e4e4e4;
    border-radius:2px;
    margin:0px;

}
#head:hover{
    cursor:pointer;
}
#content{
    text-align:justify;
    padding:5px;
    border-radius:0px 0px 2px 2px;
    background:#f0f0f0;
    display:none;
}

HTML：

<div id='wrapper'>
    <h3 id='head'>click here or mouseenter!</h3>
    <p id='content'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>

的JQuery：

$(document).ready(function(){
    $("#wrapper").mouseenter(function(){
        $("#content").slideDown("slow");
    });
});
$(document).ready(function(){
    $("#wrapper").mouseleave(function(){
        $("#content").slideUp("slow");
    });
});
$(document).ready(function(){
    $("#head").click(function(){
        $("#content").slideToggle("slow");
    });
});

»了解JSFIDDLE

jQuery：悬停时滑动，点击时保持打开状态

3 个答案: