Question

我目前正在使用滑动标签。我正在实现悬停功能以触发选项卡向左滑动。唯一的事情是当鼠标悬停它时标签会滑动，但它会立即关闭。我希望鼠标悬停时标签保持打开状态，关闭标签的唯一方法是单击最初的“箭头”div。以下是我的工作演示：http://jsfiddle.net/eMsQr/6/

<script language="javascript">
    $(document).ready(function() {
  $("#arrow").hover(
    function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    }
  );
});
</script>

<html>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
    <div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>

    <div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>
</html>

Answer 1

你是说这个意思吗？使用mouseenter - 和click - 事件：

$(document).ready(function() {
  $("#arrow")
    .mouseenter(function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    })
    .click(function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    });
});

另见this example。

Answer 2

$(document).ready(function() {
  $("#arrow").hover(function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){});
});


$("#arrow").click(function(e){
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

小提琴是here。

Jquery：悬停幻灯片选项卡机制

2 个答案: